Tag ​

<script setup lang="ts">
import { DuTag } from 'doggy-ui-v3'
</script>

<template>
  <div style="display: flex; align-items: flex-end">
    <du-tag size="small">Small</du-tag>
    <du-tag size="default">Default</du-tag>
  </div>
</template>

<script setup lang="ts">
import { DuTag } from 'doggy-ui-v3'
import { ref } from 'vue'

const colors = ref<string[]>(['#de7c00', '#91bb31', '#4071a6'])
</script>

<template>
  <du-tag v-for="item of colors" :key="item" :color="item">{{ item }}</du-tag>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuTag } from 'doggy-ui-v3'

const tags = ref<string[]>(['Cola', 'Juice'])

const handleTagClose = (idx: number) => {
  tags.value.splice(idx, 1)
}
</script>

<template>
  <du-tag v-for="(item, idx) of tags" :key="item" closeable @close="handleTagClose(idx)">{{ item }}</du-tag>
</template>