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中实现文本域的基本功能以及常见的高级功能需求，可以根据具体项目需求选择合适的方法或组合使用。
