如何修改Codepen来源的标签输入组件实现最多输入5个标签的限制

核心修改点 #

只需要调整addTag方法的校验逻辑，再优化批量输入场景的边界处理即可，修改后完整代码如下：

function tagSelect() {
  return {
    open: false,
    textInput: '',
    tags: [],
    init() {
      this.tags = JSON.parse(this.$el.parentNode.getAttribute('data-tags'));
    },
    addTag(tag) {
      tag = tag.trim()
      // 新增长度判断：标签数量小于5、非空、不存在重复才允许新增
      if (tag != "" && !this.hasTag(tag) && this.tags.length < 5) {
        this.tags.push( tag )
      }
      this.clearSearch()
      this.$refs.textInput.focus()
      this.fireTagsUpdateEvent()
    },
    fireTagsUpdateEvent() {
      this.$el.dispatchEvent(new CustomEvent('tags-update', {
        detail: { tags: this.tags },
        bubbles: true,
      }));
    },
    hasTag(tag) {
      var tag = this.tags.find(e => {
        return e.toLowerCase() === tag.toLowerCase()
      })
      return tag != undefined
    },
    removeTag(index) {
      this.tags.splice(index, 1)
      this.fireTagsUpdateEvent()
    },
    search(q) {
      if ( q.includes(",") ) {
        q.split(",").forEach(function(val) {
          this.addTag(val)
        }, this)
      }
      this.toggleSearch()
    },
    clearSearch() {
      this.textInput = ''
      this.toggleSearch()
    },
    toggleSearch() {
      // 可选优化：标签数量满5个时自动关闭搜索框，禁止继续输入
      this.open = this.textInput != '' && this.tags.length < 5
    }
  }
}

可选调整说明 #

• 上述toggleSearch方法新增的长度判断如果不需要可以删除，删掉后标签满5个时输入框仍会显示，但不会新增标签
• 批量输入逗号分隔的多个标签时，会自动按顺序添加有效标签直到凑满5个，超出部分自动忽略，符合常规交互逻辑

内容的提问来源于stack exchange，提问作者shadi ahmadian