uniapp app 实现自适应宽度 input

最新推荐文章于 2024-09-18 23:22:18 发布

每天进步一点.

最新推荐文章于 2024-09-18 23:22:18 发布

阅读量1.8k

点赞数

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/weixin_45152848/article/details/134975753

版权

文章讲述了在Vue项目中，如何处理带有输入框的组件，当输入框回显时可能不存在的问题，通过使用InputWidthHelper.vue辅助组件，利用隐藏元素计算输入框的实际宽度并动态设置给input元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心原理

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

adaption-input.vue

<template>
  <view class="adaption-input-wrapper">
    <view class="adaption-input">
      <input
        type="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.width
                  if (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 = text

        this.$nextTick(() => {
          const query = uni.createSelectorQuery().in(this)
          query
            .select(`#${this.randomID}`)
            .boundingClientRect((rect) => {
              if (rect) {
                let rectWidth = rect.width
                if (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>