Tag 标签

用于标记关键词和概括主要内容。

代码演示

基础用法

通过value设置tag显示内容。

<hd-tag :value="value"></hd-tag>

export default {
  data() {
    return {
      value: 'tag'
    }
  }
}

标签类型

通过type设置标签类型；info，primary，error，warning，success，默认为info。

<hd-tag :value="value" type="info"></hd-tag>
<hd-tag :value="value" type="primary"></hd-tag>
<hd-tag :value="value" type="error"></hd-tag>
<hd-tag :value="value" type="warning"></hd-tag>
<hd-tag :value="value" type="success"></hd-tag>

export default {
  data() {
    return {
      value: 'tag'
    }
  }
}

标签主题

通过theme设置标签主题，plain(镂空)，light(半透明填充)，dark(不透明填充)，默认为plain。

<hd-tag :value="value" theme="plain"></hd-tag>
<hd-tag :value="value" theme="light"></hd-tag>
<hd-tag :value="value" theme="dark"></hd-tag>

export default {
  data() {
    return {
      value: 'tag'
    }
  }
}

标签大小

通过size设置标签大小；large，medium，mini，默认为medium。

<hd-tag :value="value" size="large"></hd-tag>
<hd-tag :value="value" size="medium"></hd-tag>
<hd-tag :value="value" size="mini"></hd-tag>

export default {
  data() {
    return {
      value: 'tag'
    }
  }
}

标签形状

通过shape设置标签形状，square(方)，circle(圆)，rightCircle(右边圆)，leftCircle(左边圆)，默认为square。

<hd-tag :value="value" shape="square"></hd-tag>
<hd-tag :value="value" shape="circle"></hd-tag>
<hd-tag :value="value" shape="rightCircle"></hd-tag>
<hd-tag :value="value" shape="leftCircle"></hd-tag>

export default {
  data() {
    return {
      value: 'tag'
    }
  }
}

Props

Name	Description	Type	Required	Default
value	标签内容	String	false	默认值：默认
type	标签类型	'info' / 'primary' / 'error' / 'warning' / 'success'	false	默认值：info
theme	标签主题	'plain（镂空）' / 'light（半透明填充）' / 'dark（不透明填充）'	false	默认值：plain
size	标签大小	'large' / 'medium' / 'mini'	false	默认值：medium
shape	标签形状	'square（方）' / 'circle（圆）' / 'rightCircle（右边圆）' / 'leftCircle（左边圆）'	false	默认值：square

Slots

Name	Description	Default Slot Content
default	标签内部右侧自定义内容	-