npm 包 vue-chip 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要制作类似标签的 UI 组件，比如标签输入框、标签展示列表等。这时，我们可以使用一个方便的 npm 包：vue-chip。

安装

使用 npm 进行安装：

npm install vue-chip --save

使用

在项目中引入 vue-chip 组件：

import Vue from 'vue'
import VueChip from 'vue-chip'

Vue.use(VueChip)

组件

vue-chip 提供了三个组件：

Input

Input 组件可以让用户输入标签并显示已选标签。

使用方式：

<template>
  <vue-chip-input
    v-model="tagList"
  ></vue-chip-input>
</template>

在 data 中定义 tagList 数组，即可将用户输入的标签存储在其中。

data() {
  return {
    tagList: []
  }
}

List

List 组件可以展示已选择的标签列表。

使用方式：

<template>
  <vue-chip-list
    :tags="tagList"
    @remove="removeTag"
  ></vue-chip-list>
</template>

其中，:tags 属性为已选择的标签数组，@remove 事件为删除标签时触发的方法。

removeTag(index) {
  this.tagList.splice(index, 1)
}

Tag

Tag 组件为单个标签，可供其他组件使用。

使用方式：

<template>
  <vue-chip-tag
    :tag="tag"
    @remove="removeTag"
  ></vue-chip-tag>
</template>

其中，:tag 属性为标签内容，@remove 事件为删除该标签时触发的方法。

removeTag() {
  this.$emit('remove')
}

示例代码

下面是一个完整的示例：

-- -------------------- ---- -------
----------
  -----
    ---------------
      -----------------
    ------------------

    --------------
      ---------------
      -------------------
    -----------------
  ------
-----------

--------
------ ------------ ---- -----------------------------------
------ ----------- ---- ----------------------------------

------ ------- -
  ----------- -
    -------------
    -----------
  --
  ------ -
    ------ -
      -------- -------- ------- -------
    -
  --
  -------- -
    ---------------- -
      -------------------------- --
    -
  -
-
---------

总结

使用 vue-chip，我们可以快速制作标签相关的 UI 组件，大大提高开发效率。希望本篇文章对大家的学习和开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600572c781e8991b448e8ecc