可支持回车添加多个关键词的输入框或表达式输入框

效果图：

创建words.vue文件

<template>
  <div class="words">
    <span class="title" v-if="keyword.length <= 0">
      表达式搜索
      <el-popover
        placement="right"
        width="400"
        trigger="hover">
        <div>
          <div>
            帮助说明:
          </div>
          <div>
            1.公式可包括"与"，"或"，"非"的关系，用"&"代表"与"，""代表"或"，"!"代表"非"
          </div>
          <div>
            2.每个公式中的每组关键词必须以"()"包含，不支持2级括号及1组以上配置;
          </div>
          <div>
            3.关键词搜索模式输入不能包含&、|、!、(、)符号;
          </div>
          <div>
            4.表达式搜索模式下，每个公式中的每组关键词只能有&或|一种关系，大于2组关键词时，每组关键词之间不能出现!和!同时存在，也不能出现!和&同时存在;多组公式或关键词之间是"或关系";回车输入下一组关键词或公式。
          </div>
          <div>
            示例:
          </div>
          <div>
            (北京&冬奥)&(涓雪|滑冰|冰球|雪橇)!(雪车|冰壶)(中国|北京)&(科技冬奥|冰雪科技)
          </div>
        </div>
        <svg-icon slot="reference" icon-class="shuoming" class="icon" />
      </el-popover>

    </span>
    <div class="box" @click="input">
      <div class="keyword">
        <el-tag
          v-show="keyword.length > 0"
          v-for="(tag, index) in keyword"
          size="mini"
          :key="index"
          @close="close(index)"
          :closable="!checkIF">
          <span @click="tagEdit(tag, index)">{{tag}}</span>
        </el-tag>
      </div>
      <el-input
        :disabled="checkIF"
        ref="input"
        type="text"
        @keyup.enter.native="search"
        @blur="search"
        placeholder="请输入关键词并回车"
        v-model.trim="text"
        show-word-limit
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    checkIF: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      text: '',
      keyword: []
    }
  },
  watch: {
    list() {
      this.keyword = this.list
    },
  },
  methods: {
    tagEdit(tag, index) {
      this.text = tag
      this.keyword.splice(index, 1)
      this.$emit('inputKeyword', this.keyword)
    },
    input() {
      this.$refs.input.focus()
    },
    search() {
      if (this.text) {
        this.keyword.push(`${this.text}`)
        this.text = ''
        this.$emit('inputKeyword', this.keyword)
      }
    },
    close(index) {
      this.$emit('tagEdit',  this.keyword[index])
      this.keyword.splice(index, 1)
      this.$emit('inputKeyword', this.keyword)
    }
  }
}
</script>

<style lang="scss" scoped>
.words{
  height: 96px;
  background: #FFFFFF;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #E5E6EB;
  position: relative;
  padding: 7px 16px;
  z-index: 10;
  .title {
    font-size: 14px;
    color: #86909C;
    .icon {
      cursor: pointer;
      margin-left: 5px;
    }
  }
  ::v-deep .box {
    height: 100%;
    .keyword {
      font-size: 14px;
      color: #C9CDD4;
      max-height: calc(100% - 30px);
      &::-webkit-scrollbar {
        width: 0;
      }
      overflow: auto;
      .el-tag {
        font-size: 14px;
        margin-bottom: 5px;
        margin-right: 5px;
      }
    }
    .el-input__inner {
      border: none;
      height: 30px;
    }
  }
}
</style>

在父组件引用：

<words
            @tagEdit="tagEdit"
            :list="this.formData.articleQuerySaveParams.keywordExps"
            style="margin-bottom: 16px;"
            @inputKeyword="inputKeyword"
          />

tagEdit方法删除关键词触发

:list参数是默认显示（回显时使用）

inputKeyword方法时关键词发生改变时触发（回车添加时或删除关键词时）