Vue 中顯示文字框剩餘字數(限制1000字),已輸入多少字數
阿新 • • 發佈:2019-02-03
廢話不多說啦,直接上demo:
<template> <span class="circle"></span><span class="text">限制{{remnant}}/600字以內</span> <textarea name="" id="" class="input_text" style="resize:none;" maxlength="600" @input = "descInput" v-model="desc"> </textarea> </template> <script> export default { data() { return { remnant:600,//倒計數 } } }, methods: { //倒計數 descInput(){ var txtVal = this.desc.length; this.remnant = 600-txtVal; }, } </script>
<el-form-item label="週記內容" prop="content"> <el-input type="textarea" placeholder="請輸入內容" @input = "descInput" v-model="dataForm.content" style="width: 90%;" :rows="6" v-bind:readonly="infoStatus"> </el-input><br> <span class="text" style="float: right;color: #909399;margin-right: 55px;">已輸入{{remnant}}字</span> </el-form-item> <script> export default { data() { return { remnant:0,//輸入數 } } }, methods: { //計算輸入數 descInput(){ var txtVal = this.desc.length; this.remnant = txtVal; }, } </script>
效果如下: