网站建设厘金手指下拉12,做废钢那个网站好,如何设计一个网页里面有很多小工具,wordpress凡科核心原理
当 input 输入#xff0c;存在一个 view 元素容纳输入内容#xff0c;此时获取 view 元素的宽#xff0c;将其设置为 input 的宽 特殊情况#xff1a;回显的时候当前元素可能不存在#xff0c;此时需要借助一个永远显示的元素进行宽度计算#xff08;InputWidt…核心原理
当 input 输入存在一个 view 元素容纳输入内容此时获取 view 元素的宽将其设置为 input 的宽 特殊情况回显的时候当前元素可能不存在此时需要借助一个永远显示的元素进行宽度计算InputWidthHelper.vue
adaption-input.vue
templateview classadaption-input-wrapperview classadaption-inputinputtypetext:placeholder-styleplaceholderStyle:placeholderplaceholder:style{ width: inputWidth }inputchangeInputFn//viewview :idrandomID classa--input{{ modelValue || 请输入 }}/view/view
/templatescriptexport default {inheritAttrs: false,props: {modelValue: {type: [String, Number],default: ,},placeholder: {type: String,default: 请输入,},placeholderStyle: {type: String,default: color: #9ea5bb,},},data() {return {randomID: adaption_ new Date().getTime(),inputWidth: ,}},watch: {modelValue: {handler() {this.$nextTick(() {this.changeInputFn()})},immediate: true,},},options: {virtualHost: true,},computed: {inputVal: {set(val) {this.$emit(update:modelValue, val)this.$emit(change, val)},get() {return this.modelValue},},},methods: {changeInputFn() {setTimeout(() {const query uni.createSelectorQuery().in(this)query.select(#${this.randomID}).boundingClientRect((rect) {if (rect) {// 处于不可见状态需要借助一个永远显示的 dom 进行处理if (rect.width 0) {uni.$emit(getInputWidth, this.inputVal)} else {let rectWidth rect.widthif (rectWidth 150) {rectWidth 150}if (this.inputVal) {this.inputWidth rectWidth 30 px} else {this.inputWidth rectWidth 5 px}}}}).exec()}, 0)},},mounted() {uni.$on(returnInputWidth, (width) {this.inputWidth width})},}
/scriptstyle langscss scoped.adaption-input {font-size: 28rpx;}.a--input {font: inherit;opacity: 0;position: fixed;top: 0;z-index: -1;}
/style
InputWidthHelper.vue
templateview :idrandomID classa--input{{ inputValue || 请输入 }}/view
/templatescriptexport default {inheritAttrs: false,data() {return {randomID: adaption_ new Date().getTime(),inputValue: ,}},mounted() {uni.$on(getInputWidth, (text) {this.inputValue textthis.$nextTick(() {const query uni.createSelectorQuery().in(this)query.select(#${this.randomID}).boundingClientRect((rect) {if (rect) {let rectWidth rect.widthif (rectWidth 150) {rectWidth 150}if (text) {uni.$emit(returnInputWidth, rectWidth 30 px)} else {uni.$emit(returnInputWidth, rectWidth 5 px)}}}).exec()})})},}
/scriptstyle langscss scoped.adaption-input {font-size: 28rpx;}.a--input {font: inherit;opacity: 0;position: fixed;top: 0;z-index: -1;}
/style
