标签 - Chip

用来进行分类和标记的标签

基础用法

设置label属性，或直接在标签内填写标签内容。

chip1

chip2

<c-chip label="chip1"></c-chip>
<c-chip>chip2</c-chip>

自定义标签颜色

设置color属性，自定义标签颜色。可从以下颜色当中选取。

red

orange

yellow

green

cyan

blue

indigo

purple

pink

default

dark

black

<c-chip label="red" color="red"></c-chip>
<c-chip label="orange" color="orange"></c-chip>
<c-chip label="yellow" color="yellow"></c-chip>
<c-chip label="green" color="green"></c-chip>
<c-chip label="cyan" color="cyan"></c-chip>
<c-chip label="blue" color="blue"></c-chip>
<c-chip label="indigo" color="indigo"></c-chip>
<c-chip label="purple" color="purple"></c-chip>
<c-chip label="pink" color="pink"></c-chip>
<c-chip label="default"></c-chip>
<c-chip label="dark" color="dark"></c-chip>
<c-chip label="black" color="black"></c-chip>

<style>
.c-chip__wrapper {
  margin-bottom: 10px;
}
</style>

也可自定义背景色。

#336774

#724832

#516E41

<c-chip color="#336774">#336774</c-chip>
<c-chip label="#724832" color="#724832"></c-chip>
<c-chip label="#516E41" color="#516E41"></c-chip>

标签的动态添加和删除

添加closable属性，设置为可关闭标签。通过对数组的操作，实现对标签的添加和删除。

red

orange

yellow

green

cyan

blue

indigo

purple

pink

default

dark

black

<c-chip
  v-for="(chip, index) in chips"
  :key="index"
  closable
  :color="chip.color"
  :label="chip.label"
  @close="closeChip(chip)"
  style="margin-bottom:10px;"
></c-chip>

<c-input
  v-if="inputVisible"
  v-model="inputValue"
  width="short"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
  autofocus
>
</c-input>
<c-button v-else primary outline @click="showInput" style="height:28px;">+ New Chip</c-button>

<script>
  export default {
    data() {
      return {
        chips: [
          { label: 'red', color: 'red' },
          { label: 'orange', color: 'orange' },
          { label: 'yellow', color: 'yellow' },
          { label: 'green', color: 'green' },
          { label: 'cyan', color: 'cyan' },
          { label: 'blue', color: 'blue' },
          { label: 'indigo', color: 'indigo' },
          { label: 'purple', color: 'purple' },
          { label: 'pink', color: 'pink' },
          { label: 'default', color: ''},
          { label: 'dark', color: 'dark' },
          { label: 'black', color: 'black' },
        ],
        inputVisible: false,
        inputValue: ''
      }
    },
    methods: {
      closeChip(chip) {
        this.chips.splice(this.chips.indexOf(chip), 1)
      },

      showInput() {
        this.inputVisible = true
      },

      handleInputConfirm() {
        let inputValue = this.inputValue
        if (inputValue) {
          this.chips.push({label: inputValue, type: 'primary'})
        }
        this.inputVisible = false
        this.inputValue = ''
      }
    }
  }
</script>

设置标签大小

设置size属性，定义标签大小。

超小号

小号

正常

大号

超大号

<c-chip size="xs" label="超小号"></c-chip>
<c-chip size="sm" label="小号"></c-chip>
<c-chip label="正常"></c-chip>
<c-chip size="lg" label="大号"></c-chip>
<c-chip size="xl" label="超大号"></c-chip>

标签长度的限制

结合<c-tip>，通过设置标签的最大宽度，或者通过内容的长度的限制，来控制标签的宽度。可在hover时显示完整内容。

我是一个超级超级超级超级超级超级超级超级超级长的标签

我是一个超级超级超级超级超级超级超级超级

<c-tip :content="value" position="top">
  <c-chip :label="value" :style="styleObj"></c-chip>
</c-tip>
<c-tip :content="value" position="top">
  <c-chip :label="chipLabel"></c-chip>
</c-tip>

<script>
  export default {
    data () {
      return {
        value : "我是一个超级超级超级超级超级超级超级超级超级长的标签",
        styleObj : {
          maxWidth: '150px'
        }
      }
    },
    computed: {
      chipLabel () {
        return this.value.length > 20 ? this.value.slice(0, 20) : this.value
      }
    }
  }
</script>

属性说明

属性	类型	默认值	说明	可选值
label	String	-	标签内容	-
color	String	-	自定义标签颜色	red / orange / yellow / green / cyan / blue / indigo / purple / pink / dark / black...
size	String	-	标签大小	xs / sm / md / lg / xl
closable	Boolean	false	是否有关闭按钮	-