Tag 标签

基础用法

<template>
  <div>
    <plv-tag @click="handleClick">标签一</plv-tag>
    <plv-tag @click="handleClick" type="info">标签二</plv-tag>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        console.log('点击了标签');
      }
    }
  };
</script>

显示代码

尺寸

<template>
  <div>
    <plv-tag>默认标签</plv-tag>
    <plv-tag size="medium">中等标签</plv-tag>
    <plv-tag size="small">小型标签</plv-tag>
    <plv-tag size="mini">超小标签</plv-tag>
    <br /><br />
    <plv-tag type="info">默认标签</plv-tag>
    <plv-tag type="info" size="medium">中等标签</plv-tag>
    <plv-tag type="info" size="small">小型标签</plv-tag>
    <plv-tag type="info" size="mini">超小标签</plv-tag>
  </div>
</template>

显示代码

自定义样式

<template>
  <div>
    <plv-tag style="background: #67C23A;color: #ffffff;border-color: #67C23A;">颜色一</plv-tag>
    <plv-tag style="background: #ECf5FF;color: #409EFF;border-color: #D9ECFF;">颜色二</plv-tag>
    <plv-tag style="background: #FFFFFF;color: #67C23A;border-color: #67C23A;">颜色三</plv-tag>
    <plv-tag
      prefix-icon="minus"
      icon-color="#9E9E9E"
      style="background: #FFFFFF;color: #9E9E9E;border-color: #CFD8DC;border-style: dashed;cursor: pointer;">颜色三</plv-tag>
  </div>
</template>

显示代码

Attributes

参数	说明	类型	可选值	默认值
type	类型	String	primary info	primary
text	标签文案	String	-	-
prefixIcon	头部图标	String	-	-
size	尺寸	String	medium small mini	-
icon-color	图标颜色	String	-	-

Events

事件名称	说明	回调参数
click	点击 Tag 时触发的事件	-

Slot

name	说明
—	Tag 文案，优先级高于参数 text