结合蚂蚁设计的Antv(类型ElementUi框架)
html部分:
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="问题描述">
<a-textarea @click.ctrl="countFont" :maxLength="maxLength" :autoFocus="autoFocus" :rows="4" placeholder="请输入问题描述" v-decorator="[ 'retPras', validatorRules.retPras]"/>
<span class="tips">还可输入<b :class="{'remnant':this.val.length!=0,'zero':this.val.length==0}">{{remnant}}</b>个字。</span>
</a-form-item>
data.return部分:
data(){
return{
val:'',
val2:'',
val3:'',
maxLength:800,
autoFocus:true,
retPras: {
rules: [
{
required: true,
message: '请输入问题描述信息!'
},
{
validator: this.validateRetPras
}]
},
}
}
data.computed部分:
computed: {
remnant() {
return this.maxLength - this.val.length;
},
},
data.methods部分:
methods: {
countFont(){
this.maxLength=this.maxLength-20
},
validateRetPras(rule, value, callback) {
value=value.replace(/[\r\n\]/g,'')
if(value&&new RegExp(/^.{0,800}$/).test(value)){
this.val=value,
callback()
}else{
callback('请输入有效长度内字数的文字')
}},
基本上就这些吧,over!!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。