a-textarea 动态获取输入的文字数量的组件封装
<template>
<div class="textarea-wrapper">
<a-textarea
v-bind="$attrs"
v-model="$attrs.value"
@change="onChange"
/>
<span class="m-count" v-if="showWordLimit">{{ textLength }}/<template v-if="$attrs.maxLength">{{ $attrs.maxLength }}</template></span>
</div>
</template>
<script>
export default {
props: {
// 是否展示字数统计
showWordLimit: {
type: Boolean,
default: false,
},
},
// v-model处理
model: {
prop: "value",
event: "change",
},
computed: {
// 长度控制
textLength() {
return (this.$attrs.value || "").length;
},
},
methods: {
onChange(e) {
// v-model 回调函数
this.$emit("change", e.target.value);
},
},
};
</script>
<style lang="less" scoped>
.textarea-wrapper {
position: relative;
display: block;
// .m-textarea {
// padding: 8px 12px;
// height: 100%;
// }
.m-count {
color: #808080;
background: #fff;
position: absolute;
font-size: 12px;
bottom: 8px;
right: 12px;
}
}
</style>
组件引用
ATextarea(
v-model="reason"
:showWordLimit="true"
:maxLength="300"
:rows="4"
placeholder="按需在此处填写分派原因,非必填"
)