用到的技術

• 父組件向子組件的傳值
  類型檢查和預設值：您可以為props指定類型檢查和預設值。這可以確保傳遞給子組件的數據符合期望的類型，以及在沒有傳遞數據時具有合理的預設值。例如：

props: {
  message: {
    type: String,
    default: 'Default Message'
  },
  count: {
    type: Number,
    default: 0
  }
}

在上述示例中，message 的預設值是字元串 'Default Message'，count 的預設值是數字 0。

標簽組件的效果如下

封裝代碼

<template>
  <div>
    <el-row>
      <el-input
        v-model="inputText"
        type="text"
        @input="checkForSpace"
        @keydown.enter="addTag"
      />
    </el-row>
    <el-row>
      <div class="tags" style="margin-top:5px;">
        <div
          v-for="(tag, index) in tags"
          :key="index"
          class="tag"
        >
          {{ tag }}
          <span class="close" @click="removeTag(index)">&times;</span>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "InputTag",
  props: {dic: {type: Array, default: []}},
  data() {
    return {
      inputText: '',
      tags: [],
    };
  },created() {
    this.tags = this.dic || [];//關鍵字初始化，dic的值來自於父組件（調用它的組件叫父組件）
  },
  methods: {
    addTag() {
      if (this.inputText.trim() !== '') {
        this.tags.push(this.inputText);
        this.inputText = '';
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    },
    checkForSpace() {
      if (this.inputText.endsWith(' ')) {
        this.addTag();
      }
    },
  },
};
</script>

<style>
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  background: #ddd;
  padding: 4px;
  border-radius: 4px;
}

.close {
  margin-left: 4px;
  cursor: pointer;
}
</style>

使用代碼

<el-form-item label="文章關鍵詞" prop="kcUsername">
<InputTag v-model="form.keyword" placeholder="文章關係詞" :dic="form.keyword" />
</el-form-item>

:dic是子組件里定義的，初始化字典用的，比如在修改信息頁面，需要把之前的庫里存儲的信息載入到關鍵字標簽里，提交表單後，我們的form.keyword將獲取你輸入的字元串數組。

作者：倉儲大叔，張占嶺，
榮譽：微軟MVP
QQ：853066980

支付寶掃一掃，為大叔打賞!