2024-08-01- textarea 高度自适应

html
rows 1 一定要写 不然输入就会撑开两行的高度
其余样式按照要求去写就OK
<textarea type="text" rows="1" v-auto-resize placeholder="请输入详细地址"></textarea>

js 使用的是vue2 自定义指令
directives: {
    'auto-resize': {
      bind(el) {
        // 设置textarea的高度自动增长
        el.style.overflow = 'hidden'
        el.style.resize = 'none'
        el.style.boxSizing = 'border-box'

        // 处理输入事件
        const resizeTextarea = () => {
          el.style.height = 'auto'
          el.style.height = `${el.scrollHeight}px`
        }

        // 初始调用调整高度
        resizeTextarea()

        // 监听输入事件
        el.addEventListener('input', resizeTextarea)

        // 解绑时移除事件监听
        el._resizeTextarea = resizeTextarea
      },
      unbind(el) {
        el.removeEventListener('input', el._resizeTextarea)
      }
    }
  }