技術標籤：前端vue

今天寫頁面時遇到一個需求：input框型別是textarea，且支援清除。興沖沖的直接用以下方式試了一下：

<el-input v-model="val" clearable :rows="5" type="textarea"/>

發現輸入框右側並不會出現清除符號，查了半天發現clearable屬性和在type="textarea"時會失效，於是自己封裝了一個支援清空的文字域輸入框元件，拿來即用！

<template>
  <div class="textInput">
    <el-input
      :rows="rows"
      :placeholder="placeholder"
      v-model="localValue"
      @change="inputChange"
      type="textarea"/>
    <i
      v-show="clearable && localValue"
      class="clearButton el-input__icon el-icon-circle-close el-input__clear"
      @click.prevent="localValue=''"
    />
  </div>
</template>

<script>
export default {
name: "ClearableTextInput",
  props: {
    values: {
      type: String,
      default: function() {
        return ''
      }
    },
    placeholder: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Number,
      default: 1
    },
    inputChange: {
      type: Function,
      default: null
    },
  },
  computed: {
    localValue: {
      get() {
        return this.values;
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },

}
</script>

<style lang="scss" scoped>
  .textInput {
    position: relative;

    .clearButton {
      position: absolute;
      border-radius: 5px;
      right: 3px;
      z-index: 2;
      border: none;
      top: -3px;
      height: 40px;
      cursor: pointer;
      color: #ccc;
      transform: translateX(2px);
    }

    .clearButton:hover {
      color: #878d99;
    }
  }
</style>
 

使用示例：

<template>
<div>
    <ClearableTextInput
      :rows="5"
      :placeholder="placeholder"
      v-model="values"
      :values="values"
      :clearable="true"
      :input-change="inputChangeMethod"
    />
</div>
</template>

<script>
export default {
  name: "index",
  components: {
    'ClearableTextInput': resolve => require([('xxxx/ClearableTextInput')], resolve)
  },
  data() {
    return {
      values: '',
      placeholder: 'this is a demo'
    }
  },
  methods: {
   inputChangeMethod() {
     console.log('input changed')
   }
 }   
}
</script>

<style lang="scss" scoped>

</style>
 

效果：