<template>
  <div>
    <demo-block title="基础用法" padding>
      <van-tag custom-class="demo-margin-right" type="primary">标签</van-tag>
      <van-tag custom-class="demo-margin-right" type="success">标签</van-tag>
      <van-tag custom-class="demo-margin-right" type="danger">标签</van-tag>
      <van-tag custom-class="demo-margin-right" type="warning">标签</van-tag>
    </demo-block>

    <demo-block title="圆角样式" padding>
      <van-tag custom-class="demo-margin-right" round type="primary">标签</van-tag>
      <van-tag custom-class="demo-margin-right" round type="success">标签</van-tag>
      <van-tag custom-class="demo-margin-right" round type="danger">标签</van-tag>
      <van-tag custom-class="demo-margin-right" round type="warning">标签</van-tag>
    </demo-block>

    <demo-block title="标记样式" padding>
      <van-tag custom-class="demo-margin-right" mark type="primary">标签</van-tag>
      <van-tag custom-class="demo-margin-right" mark type="success">标签</van-tag>
      <van-tag custom-class="demo-margin-right" mark type="danger">标签</van-tag>
      <van-tag custom-class="demo-margin-right" mark type="warning">标签</van-tag>
    </demo-block>

    <demo-block title="空心样式" padding>
      <van-tag custom-class="demo-margin-right" plain type="primary">标签</van-tag>
      <van-tag custom-class="demo-margin-right" plain type="success">标签</van-tag>
      <van-tag custom-class="demo-margin-right" plain type="danger">标签</van-tag>
      <van-tag custom-class="demo-margin-right" plain type="warning">标签</van-tag>
    </demo-block>

    <demo-block title="自定义颜色" padding>
      <van-tag custom-class="demo-margin-right" color="#f2826a">标签</van-tag>
      <van-tag custom-class="demo-margin-right" color="#7232dd">标签</van-tag>
      <van-tag custom-class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
      <van-tag custom-class="demo-margin-right" color="#ffe1e1" text-color="#ad0000">标签</van-tag>
    </demo-block>

    <demo-block title="标签大小" padding>
      <van-tag custom-class="demo-margin-right" type="danger">标签</van-tag>
      <van-tag custom-class="demo-margin-right" type="danger" size="medium">标签</van-tag>
      <van-tag custom-class="demo-margin-right" type="danger" size="large">标签</van-tag>
    </demo-block>

    <demo-block title="可关闭标签" padding>
      <van-tag
        v-if="show.primary"
        custom-class="demo-margin-right"
        type="primary"
        size="medium"
        closeable
        id="primary"
        @close="onClose('primary')"
        >标签</van-tag
      >
      <van-tag
        v-if="show.success"
        custom-class="demo-margin-right"
        type="success"
        size="medium"
        closeable
        id="success"
        @close="onClose('success')"
        >标签</van-tag
      >
    </demo-block>

  </div>
</template>

<script>
export default {
  data() {
    return {
      show: {
        success: true,
        primary: true
      }
    }
  },
  methods: {
    onClose(id) {
      this.show[id] = false
    }
  }
}
</script>

<style>

</style>
