天天网站,合肥专业网站制,企业做网站需要在通管局备案,东莞网站建设信科核心原理
当 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
