<template>
  <div class="ele-body">
    <el-card shadow="never" header="默认样式">
      <el-tag :size="tagSize" :effect="tagTheme">标签一</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="success">标签二</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="info">标签三</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="warning">标签四</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="danger">标签五</el-tag>
      <div class="demo-tag-item">
        <span>尺寸设置:</span>
        <el-radio-group v-model="tagSize">
          <el-radio label="large">默认</el-radio>
          <el-radio label="medium">中等</el-radio>
          <el-radio label="small">小型</el-radio>
          <el-radio label="mini">超小</el-radio>
        </el-radio-group>
      </div>
      <div class="demo-tag-item">
        <span>主题设置:</span>
        <el-radio-group v-model="tagTheme">
          <el-radio label="light">light</el-radio>
          <el-radio label="dark">dark</el-radio>
          <el-radio label="plain">plain</el-radio>
        </el-radio-group>
      </div>
    </el-card>
    <el-card shadow="never" header="圆角样式">
      <el-tag :size="tagSize" :effect="tagTheme" class="ele-tag-radius">标签一</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="success" class="ele-tag-radius">标签二</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="info" class="ele-tag-radius">标签三</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="warning" class="ele-tag-radius">标签四</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="danger" class="ele-tag-radius">标签五</el-tag>
    </el-card>
    <el-card shadow="never" header="圆形样式">
      <el-tag :size="tagSize" :effect="tagTheme" class="ele-tag-round">1</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="success" class="ele-tag-round">2</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="info" class="ele-tag-round">3</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="warning" class="ele-tag-round">4</el-tag>
      <el-tag :size="tagSize" :effect="tagTheme" type="danger" class="ele-tag-round">5</el-tag>
    </el-card>
    <el-card shadow="never" header="可编辑">
      <ele-tags-input v-model="tags" :size="tagSize" :effect="tagTheme"/>
      <div style="margin-top: 15px;">v-model双向绑定：{{ JSON.stringify(tags) }}</div>
    </el-card>
    <el-card shadow="never" header="状态文字">
      <div class="demo-tag-item" style="margin-top: 0;">
        <ele-dot :ripple="ripple" text="运行中"/>
        <ele-dot type="success" :ripple="ripple" text="已上线"/>
        <ele-dot type="danger" :ripple="ripple" text="异常"/>
        <ele-dot type="info" :ripple="ripple" text="关闭"/>
      </div>
      <div class="demo-tag-item">
        <ele-dot :ripple="ripple" text="运行中" size="8px"/>
        <ele-dot type="success" :ripple="ripple" text="已上线" size="8px"/>
        <ele-dot type="danger" :ripple="ripple" text="异常" size="8px"/>
        <ele-dot type="info" :ripple="ripple" text="关闭" size="8px"/>
      </div>
      <div class="demo-tag-item">
        <span>显示动画:</span>
        <el-radio-group v-model="ripple">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "DemoTag",
  data() {
    return {
      tagSize: 'small',
      tagTheme: 'light',
      tags: ['标签一', '标签二', '标签三'],
      ripple: true
    }
  }
}
</script>

<style scoped>
.demo-tag-item {
  margin-top: 20px;
}

.demo-tag-item > span {
  margin-right: 20px;
}
</style>