javascript - clearable prop 对我不起作用，有人可以建议吗

Question

我有一个我在整个项目中使用的自定义输入字段。

我正在尝试在我的输入组件中使用可清除的 Prop ，以便我可以一键清除文本。

但设置clearable:"true"不管用。

我正在使用

<input :class="inputClass" v-bind="$attrs" :clearable="clearable" :value="value" @input="(e) => $emit('input', e.target.value)"/>

clearable 的值(value)来自于我从组件传递的 Prop ，我必须在其中使用 clearable。

请指导我..在此先感谢 !!!!

Answer 1

clearable 不是标准的 HTML 属性。您将不得不为此使用自定义组件，这将更容易与 v-model 一起使用。我还提供了一个示例，说明如何使用事件/默认值来完成此操作作为展示如何使用 v-model 执行此操作的示例:

[CodePen Mirror]

编辑:稍微清理一下代码...

const customInputNoVmodel = {
  template: "#custom-input-no-vmodel",
  props: {
    clearable: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  methods: {
    onInput(e) {
      this.$emit("input", e.target.value);
    }
  },
  computed: {
    isClearable() {
      return this.clearable === true ? "search" : "text";
    }
  }
};

const vm = new Vue({
  el: "#app",
  components: {
    customInputNoVmodel
  },
  data: {
    value: "Initial Value Without v-model",
    cssClasses: "my-class-one"
  },
  methods: {
    handleInput(e) {
      this.value = e;
    }
  }
});


/* *************************** */


const customInputWithVmodel = {
  template: "#custom-input-with-vmodel",
  props: {
    value: {
      type: String,
      required: false,
    },
    clearable: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  computed: {
    isClearable() {
      return this.clearable === true ? "search" : "text";
    },
    handleOnInput: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val)
      }
    },
  }
};

const vm2 = new Vue({
  el: "#app2",
  components: {
    customInputWithVmodel
  },
  data: {
    text: "Initial Value With v-model",
    cssClasses: "my-class-two"
  }
})

.my-class-one {
  background-color: blue;
  color: white;
  border: 1px solid red;
  width: 200px;
}

.my-class-two {
  background-color: black;
  color: red;
  border: 5px solid darkmagenta;
  width: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <div>
    Not using v-model:
    <custom-input-no-vmodel 
      class="my-class-one" 
      :clearable="true" 
      :value="value"
      @input="handleInput"
    ></custom-input-no-vmodel>
  </div>
</div>

<br/>

<div id="app2">
  <div>
    With v-model 
    <custom-input-with-vmodel 
      :class="cssClasses" 
      :clearable="true" 
      v-model="text"
    ></custom-input-with-vmodel>
  </div>
</div>

<!-- SIMULATES COMPONENT ~~WITHOUT~~ V-MODEL -->
<script type="text/x-template" id="custom-input-no-vmodel">
    <input
      v-bind="$attrs"
      :type="isClearable"
      @input="onInput"
    />
</script>

<!-- SIMULATES COMPONENT WITH V-MODEL -->
<script type="text/x-template" id="custom-input-with-vmodel">
    <input
      v-bind="$attrs"
      :type="isClearable"
      v-model="handleOnInput"
    />
</script>