element ui select框实现ctrl+c和ctrl+v

//多选框的形式


<template>
  <div>
    <el-select
      ref="select"
      placeholder="请选择主食"
      multiple
      filterable
      collapse-tags
      id="food"
      @keydown.ctrl.67.native="copyFocusedBoxContent"
      v-model="formData.food"
      clearable
      @input.native="dealInput"
    >
      <el-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.code"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  methods: {
    dealInput() {
      const inputValue = this.$refs.select.$refs.input.value.split(",");
      const recordIndex = [];
      for (const e of this.options) {
        recordIndex.push(e.code);
      }

      for (const f of inputValue) {
        if (recordIndex.includes(f) && !this.formData.food.includes(f)) {
          this.formData.food.push(f);
        }
      }
    },

    copyFocusedBoxContent() {
      this.$copyText(this.formData.food).then(
        (e) => {
          this.$message({
            message: "Copied",
            duration: 200,
          });
        },
        (e) => {
          this.$message({
            message: "Can not copy",
            duration: 200,
          });
        }
      );
    },
  },
  data() {
    return {
      formData: {
        food: [],
      },
      options: [
        {
          code: "11",
          label: "11-黄金糕",
        },
        {
          code: "12",
          label: "12-双皮奶",
        },
        {
          code: "13",
          label: "13-蚵仔煎",
        },
        {
          code: "14",
          label: "14-龙须面",
        },
        {
          code: "15",
          label: "15-北京烤鸭",
        },
      ],
    };
  },
};
</script>

单选框的形式

<template>
  <div>
    <el-select
      ref="select"
      placeholder="请选择主食"
      filterable
      id="food"
      @keydown.ctrl.67.native="copyFocusedBoxContent"
      v-model="formData.food"
      clearable
      @focus="dealFocus"
    >
      <!-- multiple -->
      <!-- collapse-tags -->
      <el-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.code"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  methods: {
    dealFocus() {
      //由于select是单选了这里需要通过this.$refs.select.$children[0].value;获取用户的输入值
      //还需要通过给最外层对象添加原生的事件this.$refs.select.$refs.reference.$refs.input.onblur
      this.$refs.select.$refs.reference.$refs.input.onblur = () => {
        const inputValue = this.$refs.select.$children[0].value;
        const recordIndex = [];
        for (const e of this.options) {
          recordIndex.push(e.code);
        }
        if (recordIndex.includes(inputValue)) {
          this.formData.food = inputValue;
        }
      };
    },

    copyFocusedBoxContent() {
      this.$copyText(this.formData.food).then(
        (e) => {
          this.$message({
            message: "Copied",
            duration: 200,
          });
        },
        (e) => {
          this.$message({
            message: "Can not copy",
            duration: 200,
          });
        }
      );
    },
  },
  data() {
    return {
      formData: {
        food: "",
      },
      options: [
        {
          code: "11",
          label: "11-黄金糕",
        },
        {
          code: "12",
          label: "12-双皮奶",
        },
        {
          code: "13",
          label: "13-蚵仔煎",
        },
        {
          code: "14",
          label: "14-龙须面",
        },
        {
          code: "15",
          label: "15-北京烤鸭",
        },
        {
          code: "115",
          label: "115-xxxx",
        },

        {
          code: "111",
          label: "111-ssss",
        },
      ],
    };
  },
};
</script>