uniapp app 实现自适应宽度 input

核心原理

当 input 输入，存在一个 view 元素容纳输入内容，此时获取 view 元素的宽，将其设置为 input 的宽
特殊情况：回显的时候当前元素可能不存在，此时需要借助一个永远显示的元素进行宽度计算（InputWidthHelper.vue）

adaption-input.vue

<template><view class="adaption-input-wrapper"><view class="adaption-input"><inputtype="text":placeholder-style="placeholderStyle":placeholder="placeholder":style="{ width: inputWidth }"@input="changeInputFn"/></view><view :id="randomID" class="a--input">{{ modelValue || '请输入' }}</view></view>
</template><script>export 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})},}
</script><style lang="scss" scoped>.adaption-input {font-size: 28rpx;}.a--input {font: inherit;opacity: 0;position: fixed;top: 0;z-index: -1;}
</style>

InputWidthHelper.vue

<template><view :id="randomID" class="a--input">{{ inputValue || '请输入' }}</view>
</template><script>export 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()})})},}
</script><style lang="scss" scoped>.adaption-input {font-size: 28rpx;}.a--input {font: inherit;opacity: 0;position: fixed;top: 0;z-index: -1;}
</style>