vue实现文本域

在Vue中实现文本域

Vue中可以通过<textarea>元素实现文本域功能，结合v-model实现双向数据绑定。以下是具体实现方法：

基础实现

<template>
  <div>
    <textarea v-model="message" placeholder="请输入内容"></textarea>
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

限制输入长度

可以通过计算属性或监听器限制输入长度：

<template>
  <div>
    <textarea 
      v-model="message" 
      @input="limitLength"
      placeholder="最多输入100个字符"
    ></textarea>
    <p>已输入：{{ message.length }}/100</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    limitLength() {
      if (this.message.length > 100) {
        this.message = this.message.slice(0, 100)
      }
    }
  }
}
</script>

自动调整高度

实现根据内容自动调整高度的文本域：

<template>
  <div>
    <textarea 
      ref="textarea"
      v-model="message" 
      @input="autoResize"
      placeholder="自动调整高度的文本域"
    ></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    autoResize() {
      this.$nextTick(() => {
        const textarea = this.$refs.textarea
        textarea.style.height = 'auto'
        textarea.style.height = textarea.scrollHeight + 'px'
      })
    }
  }
}
</script>

表单验证

结合Vuelidate进行表单验证：

<template>
  <div>
    <textarea 
      v-model="message" 
      :class="{ 'error': $v.message.$error }"
      @blur="$v.message.$touch()"
      placeholder="必填字段"
    ></textarea>
    <p v-if="$v.message.$error">内容不能为空</p>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      message: ''
    }
  },
  validations: {
    message: {
      required
    }
  }
}
</script>

<style>
.error {
  border-color: red;
}
</style>

自定义指令实现自动调整高度

可以创建自定义指令实现更优雅的自动高度调整：

// main.js
Vue.directive('auto-height', {
  bind(el) {
    el.style.overflow = 'hidden'
    el.style.minHeight = '50px'
    el._resize = () => {
      el.style.height = 'auto'
      el.style.height = el.scrollHeight + 'px'
    }
    el.addEventListener('input', el._resize)
  },
  unbind(el) {
    el.removeEventListener('input', el._resize)
  }
})

<template>
  <textarea v-model="message" v-auto-height></textarea>
</template>

这些方法涵盖了Vue中实现文本域的基本功能以及常见的高级功能需求，可以根据具体项目需求选择合适的方法或组合使用。