1、预览

  1.                             ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1225858/1599572845339-07d8339e-4f67-491b-8dc3-5ad7cd2da0c6.png#align=left&display=inline&height=188&margin=%5Bobject%20Object%5D&name=image.png&originHeight=188&originWidth=422&size=8938&status=done&style=none&width=422)

2、实现

  1. <template>
  2.   <div class="text-input-cell-wrapper" :style="textInputSty">
  3.     <textarea
  4.       class="text-input-sty"
  5.       :disabled="disableInput"
  6.       :value="textValue"
  7.       :placeholder="defaultvalue"
  8.       @input="changeValue"
  9.       :maxlength="maxCount"
  10.     />
  11.     <span class="count">{{ this.count }}/{{ maxCount }}</span>
  12.   </div>
  13. </template>
  15. <script>
  16. import Vue from 'vue';
  17. export default Vue.extend({
  18.   name: 'TextInputCell',
  19.   props: {
  20.     textInputSty: '',
  21.     desc: '',
  22.     disableInput: false,
  23.     value: '',
  24.     defaultvalue: '',
  25.     maxCount: {
  26.       default: 100,
  27.       type: Number,
  28.     },
  29.   },
  30.   data: function () {
  31.     return {
  32.       textValue: '',
  33.       count: 0,
  34.     };
  35.   },
  36.   created() {
  37.     this.$nextTick(() => {
  38.       this.textValue = this.value;
  39.     });
  40.   },
  41.   // computed: {
  42.   //   countFun: function (e) {
  43.   //     return (this.textValue && this.textValue.length) || 0;
  44.   //   },
  45.   // },
  46.   watch: {
  47.     textValue(newVal, oldVal) {
  48.       this.count = (newVal && newVal.length) || 0;
  49.     },
  50.   },
  51.   methods: {
  52.     changeValue(e) {
  53.       this.$nextTick(() => {
  54.         this.textValue = e.target.value;
  55.          this.$emit('input', event.target.value);
  56.       });
  57.     },
  58.   },
  59. })
  60. </script>
  62. <style lang="scss" scoped>
  63. .text-input-cell-wrapper {
  64.   height: 55px;
  65.   background: #fff;
  66.   display: flex;
  67.   line-height: 55px;
  68.   justify-content: space-between;
  69.   padding: 0 15px;
  70.   box-sizing: border-box;
  71.   position: relative;
  72.   .text-input-sty {
  73.     overflow: hidden;
  74.     resize: none;
  75.     width: 100%;
  76.     text-align: left;
  77.     font-size: 14px;
  78.     border: 0;
  79.     float: right;
  80.     line-height: 30px;
  81.     padding: 10px;
  82.   }
  83.   .text-input-sty::-webkit-input-placeholder {
  84.     color: #acb7ce;
  85.     font-size: 14px;
  86.     font-family: 'PingFang FC';
  87.   }
  88.   .text-input-sty:disabled {
  89.     background: #fff;
  90.   }
  91.    .text-input-sty:focus {
  92.     outline: none;
  93.     border: 0;
  94.   }
  95.   .count {
  96.     position: absolute;
  97.     color: #a2adb6;
  98.     font-size: 13px;
  99.     right: 10px;
  100.     bottom: 0px;
  101.   }
  102. }
  103. </style>

3、使用

  1. import TextInputCell from './components/TextInputCell'
  2. ...
  3. components: {
  4.   TextInputCell
  5. }
  6. ...
  7. <TextInputCell
  8.     defaultvalue="添加备注(选填)"
  9.     textInputSty="height: 176px; width:100%;margin-bottom:10px;margin-bottom:28px;"
  10.     :maxCount="100"
  11.      v-model="remark"
  12.   />