js el-input输入框需要支持多输入并且以 逗号分割 完整代码

好的，以下是一个支持多输入并以逗号分割的 el-input 输入框的完整代码（使用了 Vue.js 和 Element UI）：

<template>
  <div>
    <el-input
      v-model="inputValue"
      @keyup.enter="handleEnter"
      @keyup.native.188="handleEnter"
      @blur="handleEnter"
      placeholder="请输入内容，多个内容请用逗号分隔"
    ></el-input>
    <ul>
      <li v-for="(item, index) in inputList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "", // 输入框的值
      inputList: [] // 多输入的内容列表
    };
  },
  methods: {
    handleEnter() {
      // 监听回车、逗号和失去焦点事件
      if (this.inputValue.trim() !== "") {
        // 如果输入框的值不为空
        const arr = this.inputValue.split(/[,\uff0c]/g); // 以逗号或中文逗号分割字符串
        for (let i = 0; i < arr.length; i++) {
          const str = arr[i].trim(); // 去除字符串两端的空格
          if (str !== "" && !this.inputList.includes(str)) {
            this.inputList.push(str); // 将内容加入到列表中
          }
        }
        this.inputValue = ""; // 清空输入框的值
      }
    }
  }
};
</script>

这个组件中，使用了 `inputValue` 和 `inputList` 两个 data 属性，分别表示输入框的值和多输入的内容列表。在模板中，使用 v-model 指令将输入框的值绑定到 `inputValue` 上，并监听 `keyup.enter`、`keyup.native.188`（对应逗号）和 `blur` 事件，执行 `handleEnter` 方法。在 `handleEnter` 方法中，首先判断输入框的值是否为空，如果不为空，则以逗号或中文逗号分割字符串并去除每个分割后的字符串两端的空格，然后将不为空且不在列表中的字符串加入到 `inputList` 中。最后，清空输入框的值。在模板中通过 v-for 渲染多输入的内容列表。