feat: 迁移复用PC原有关键词添加组件

apps/bigmember_pc/src/views/search/components/keyword-tags.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="keyword-tags-container">
+    <div class="add-keyword-tags">
+      <el-tag
+        :key="tag"
+        v-for="tag in list"
+        closable
+        :disable-transitions="false"
+        @close="handleClose(tag)"
+      >
+        {{ tag }}
+      </el-tag>
+    </div>
+    <div v-if="list.length < maxListLength">
+      <el-input
+        class="add-keyword-input"
+        type="text"
+        :placeholder="placeholder"
+        v-model.trim="addKeywordVal"
+        :maxlength="maxLength"
+        show-word-limit
+        :disabled="disabled"
+        @keyup.native="onKeyup"
+      ></el-input>
+      <span
+        class="add-keyword-btn"
+        :class="{ focus: addKeywordVal }"
+        @click="addKeyTags"
+        >添加</span
+      >
+    </div>
+    <slot name="radio"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'keyword-tags-pc',
+  props: {
+    placeholder: {
+      type: String,
+      default: '请输入关键词'
+    },
+    // 输入框可输入最大长度
+    maxLength: {
+      type: Number,
+      default: 15
+    },
+    list: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    // 数组最大长度
+    maxListLength: {
+      type: Number,
+      default: 5
+    },
+    // 输入框是否禁用
+    disabled: Boolean,
+    beforeChange: {
+      type: Function,
+      default: () => true
+    }
+  },
+  data: function () {
+    return {
+      addKeywordVal: ''
+    }
+  },
+  mounted: function () {},
+  methods: {
+    addKeyTags: function () {
+      var beforeChange = this.beforeChange()
+      if (!beforeChange) return
+      if (!this.addKeywordVal) return
+      this.list.push(this.addKeywordVal.replace(/\s*$/g, ''))
+      console.log(this.list)
+      this.$emit('change', this.list)
+      this.addKeywordVal = ''
+    },
+    handleClose: function (tag) {
+      this.list.splice(this.list.indexOf(tag), 1)
+      this.$emit('change', this.list)
+    },
+    onKeyup: function () {
+      // this.addKeywordVal = this.addKeywordVal.replace(/^\s+|\s+$/g, '')
+      this.addKeywordVal = this.addKeywordVal.trim().replace(/^\s*/g, '')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.keyword-tags-container {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .add-keyword-btn {
+    margin-left: 8px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #999999;
+    cursor: pointer;
+  }
+  .add-keyword-btn.focus {
+    color: #2cb7ca;
+  }
+  .add-keyword-tags {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .add-keyword-tags .el-tag {
+    height: 24px;
+    line-height: 22px;
+    padding: 0 8px;
+    background: #f5f6f7;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    margin-right: 8px;
+    color: #1d1d1d;
+    font-size: 14px;
+  }
+  .add-keyword-tags .el-tag .el-tag__close {
+    color: #aaaaaa;
+  }
+  .add-keyword-tags .el-tag:hover {
+    color: #2cb7ca;
+    border: 1px solid #2abed1;
+    background: #fff;
+  }
+  .add-keyword-tags .el-tag:hover .el-tag__close {
+    background-color: transparent;
+    color: #2cb7ca;
+  }
+
+  .add-keyword-input {
+    width: auto !important;
+  }
+  .add-keyword-input > .el-input__inner {
+    width: 280px;
+    height: 30px;
+    line-height: 30px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+  }
+}
+</style>