Vue3标签(Tag)

这篇具有很好参考价值的文章主要介绍了Vue3标签(Tag)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果如下图:在线预览

Vue3标签(Tag),ts,vue3,less,vue3,typescript
Vue3标签(Tag),ts,vue3,less,vue3,typescript

APIs

参数 说明 类型 默认值 必传
closable 标签是否可以关闭 boolean false false
color 标签颜色,预置多种常用颜色:'success', 'processing', 'error', 'warn', 'pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime' string ‘’ false
icon 设置图标 string | slot ‘’ false
size 标签尺寸 ‘small’ | ‘middle’ | ‘large’ ‘middle’ false
bordered 是否有边框 boolean true false
dynamic 是否启用标签动态添加和删除 boolean false false
value(v-model) 动态标签数组,dynamictrue 时生效 string[] | Tag[] [] false
spaceWidth 间距区域总宽度 string | number ‘auto’ false
spaceAlign 垂直排列方式 ‘stretch’ | ‘start’ | ‘end’ | ‘center’ | ‘baseline’ ‘start’ false
spaceDirection 间距方向 ‘horizontal’ | ‘vertical’ ‘horizontal’ false
spaceSize 间距大小,数组时表示: [水平间距, 垂直间距] number | number[] | ‘small’ | ‘middle’ | ‘large’ ‘small’ false

Tag Type

名称 说明 类型 必传
label 标签文本名 string | slot true
closable 标签是否可以关闭,默认 true boolean false
color 标签颜色 string false
icon 设置图标 string | slot false
size 标签尺寸 ‘small’ | ‘middle’ | ‘large’ false
bordered 是否有边框,默认为 true boolean false

Events

事件名称 说明 参数
close 关闭时的回调 (e: Event) => void
dynamicClose 启用标签动态添加和删除时关闭的回调 (tag: Tag, index: number) => void

创建标签组件Tag.vue

<script setup lang="ts">
import { ref, computed, nextTick, useSlots, watchEffect } from 'vue'
import Space from '../space'
interface Tag {
  label?: string // 标签文本名 string | slot
  closable?: boolean // 标签是否可以关闭,默认 true
  color?: string // 标签颜色
  icon?: string // 设置图标 string | slot
  size?: 'small'|'middle'|'large' // 标签尺寸
  bordered?: boolean // 是否有边框
}
interface Props {
  closable?: boolean // 标签是否可以关闭
  color?: string // 标签颜色
  icon?: string // 设置图标 string | slot
  size?: 'small'|'middle'|'large' // 标签尺寸
  bordered?: boolean // 是否有边框
  dynamic?: boolean // 是否启用标签动态添加和删除
  value?: string[]|Tag[] // 动态标签数组,dynamic 为 true 时生效
  // 启用动态标签后,可设置以下 Space 相关属性
  spaceWidth?: string|number // 间距区域总宽度
  spaceAlign?: 'stretch'|'start'|'end'|'center'|'baseline' // 垂直排列方式
  spaceDirection?: 'horizontal'|'vertical' // 间距方向
  spaceSize?: number|number[]|'small'|'middle'|'large' // 间距大小,数组时表示: [水平间距, 垂直间距]
}
const props = withDefaults(defineProps<Props>(), {
  closable: false,
  color: '',
  icon: '',
  size: 'middle',
  bordered: true,
  dynamic: false,
  value: () => [],
  spaceWidth: 'auto',
  spaceAlign: 'start',
  spaceDirection: 'horizontal',
  spaceSize: 'small'
})
const isStrArray = computed(() => {
  if (props.dynamic) {
    if (props.value.length) {
      if (typeof props.value[0] === 'string') {
        return true
      }
      if (typeof props.value[0] === 'object') {
        return false
      }
    }
  }
  return null
})
const tags = computed(() => {
  if (props.dynamic) {
    if (props.value.length) {
      if (isStrArray.value) {
        return props.value.map((tag: any) => {
          return {
            label: tag,
            closable: true
          }
        })
      } else {
        return props.value.map((tag: any) => {
          return {
            closable: true,
            ...tag
          }
        })
      }
    }
  }
  return []
})
const slots = useSlots()
const showIcon = computed(() => {
  if (!props.dynamic) {
    const iconSlots = slots.icon?.()
    if (iconSlots) {
      return Boolean(iconSlots[0].children !== 'v-if' && iconSlots?.length)
    }
    return props.icon
  }
  return false
})
const inputRef = ref()
const showInput = ref(false)
const inputValue = ref('')
const presetColor = ['success', 'processing', 'error', 'warning', 'default', 'pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime']
const hidden = ref(false)
const tagsIconRef = ref()
const showTagsIcon = ref(Array(props.value.length).fill(1))
watchEffect(() => {
  if (props.dynamic) {
    const len = props.value.length
    showTagsIcon.value = Array(len).fill(1)
    nextTick(() => {
      if (tagsIconRef.value) {
        for (let n = 0; n < len; n++) {
          showTagsIcon.value[n] = tagsIconRef.value[n].offsetWidth
        }
      }
    })
  }
})
const emits = defineEmits(['update:value', 'close', 'dynamicClose'])
function onClose (e: MouseEvent) {
  hidden.value = true
  emits('close', e)
}
function onCloseTags (tag: Tag, n: number) {
  const newValue = (props.value as any[]).filter((tag: any, index: number) => {
    return index !== n
  })
  emits('update:value', newValue)
  emits('dynamicClose', tag, n)
}
function onAdd () {
  showInput.value = true
  nextTick(() => {
    inputRef.value.focus()
  })
}
function onChange () {
  if (isStrArray.value) {
    emits('update:value', [...props.value, inputValue.value])
  } else {
    emits('update:value', [
      ...props.value,
      {
        label: inputValue.value
      }
    ])
  }
  showInput.value = false
  inputRef.value = ''
}
function onKeyboard (e: KeyboardEvent) {
  if (e.key === 'Enter') {
    inputRef.value.blur()
  }
}
</script>
<template>
  <div
    v-if="!dynamic"
    class="m-tag"
    :class="[`tag-${size}`, color && presetColor.includes(color) ? 'tag-' + color:'', {'tag-borderless': !bordered, 'has-color': color && !presetColor.includes(color), hidden: hidden}]"
    :style="`background-color: ${color && !presetColor.includes(color) ? color : ''};`">
    <span class="m-icon" v-if="showIcon">
      <slot name="icon">{{ icon }}</slot>
    </span>
    <span class="u-tag">
      <slot></slot>
    </span>
    <span class="m-close" v-if="closable" @click="onClose">
      <svg focusable="false" class="u-close" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
    </span>
  </div>
  <Space v-else :width="spaceWidth" :align="spaceAlign" :direction="spaceDirection" :size="spaceSize">
    <div
      class="m-tag"
      :class="[`tag-${tag.size || size}`, (tag.color || color) && presetColor.includes((tag.color || color)) ? 'tag-' + (tag.color || color):'', {'tag-borderless': tag.bordered !== undefined && !tag.bordered, 'has-color': (tag.color || color) && !presetColor.includes((tag.color || color))}]"
      :style="`background-color: ${(tag.color || color) && !presetColor.includes((tag.color || color)) ? (tag.color || color) : ''};`"
      v-for="(tag, index) in tags" :key="index">
      <span class="m-icon" ref="tagsIconRef" v-show="showTagsIcon[index]">
        <slot name="icon" :index="index">{{ tag.icon }}</slot>
      </span>
      <span class="u-tag">
        <slot :label="tag.label" :index="index">{{ tag.label }}</slot>
      </span>
      <span class="m-close" v-if="tag.closable || closable" @click="onCloseTags(tag, index)">
        <svg focusable="false" class="u-close" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
      </span>
    </div>
    <div v-if="!showInput" class="m-tag" :class="[`tag-${size}`, {'m-plus': dynamic}]" @click="onAdd">
      <svg focusable="false" class="u-plus" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg>
    </div>
    <input
      v-show="showInput"
      ref="inputRef"
      class="u-input"
      :class="`input-${size}`"
      type="text"
      v-model="inputValue"
      @blur="showInput = false"
      @change="onChange"
      @keydown="onKeyboard" />
  </Space>
</template>
<style lang="less" scoped>
.m-tag {
  height: 24px;
  font-size: 14px;
  line-height: 22px;
  display: inline-block;
  color: rgba(0, 0, 0, .88);
  padding-inline: 7px;
  white-space: nowrap;
  background: rgba(0, 0, 0, .02);
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: all .2s;
  text-align: start;
  .m-icon {
    margin-right: 5px;
    height: 100%;
    display: inline-flex;
    align-items: center;
  }
  .u-tag {
    height: 100%;
    display: inline-flex;
    align-items: center;
    vertical-align: top;
  }
  .u-plus {
    display: inline-flex;
    align-items: center;
    width: 14px;
    height: 14px;
    fill: rgba(0, 0, 0, .88);
    font-style: normal;
    line-height: 0;
    text-align: center;
    vertical-align: -0.175em;
    transition: fill .2s;
  }
  .m-close {
    margin-inline-start: 3px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    height: 100%;
    vertical-align: top;
    font-style: normal;
    line-height: 0;
    text-align: center;
    cursor: pointer;
    .u-close {
      display: inline-block;
      line-height: 1;
      fill: rgba(0, 0, 0, .45);
      transition: all .2s;
      &:hover {
        fill: rgba(0, 0, 0, .88);
      }
    }
  }
}
.tag-small {
  height: 22px;
  font-size: 12px;
  line-height: 20px;
  border-radius: 4px;
  .u-plus {
    width: 12px;
    height: 12px;
  }
  .m-close {
    font-size: 10px;
  }
}
.tag-large {
  height: 28px;
  line-height: 26px;
  .m-close {
    font-size: 14px;
    vertical-align: -0.16em;
  }
}
.m-plus {
  background: rgb(255, 255, 255);
  border-style: dashed;
  padding-inline: 10px;
  text-align: center;
  cursor: pointer;
  &:hover {
    border-color: @themeColor;
    .u-plus {
      fill: @themeColor;
    }
  }
}
.u-input {
  width: 86px;
  color: rgba(0, 0, 0, .88);
  height: 24px;
  font-size: 14px;
  line-height: 22px;
  padding: 0 8px;
  position: relative;
  display: inline-block;
  min-width: 0;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  outline: none;
  transition: all .2s;
  &:focus {
    border-color: #4096ff;
    box-shadow: 0 0 0 2px rgba(5, 145, 255, .1);
    border-inline-end-width: 1px;
    outline: 0;
  }
}
.input-small {
  width: 78px;
  height: 22px;
  font-size: 12px;
  line-height: 20px;
  padding: 0 6px;
  border-radius: 4px;
}
.input-large {
  width: 90px;
  height: 28px;
  line-height: 26px;
}
.tag-success {
  color: #52c41a;
  background: #f6ffed;
  border-color: #b7eb8f;
  :deep(svg) {
    fill: #52c41a;
  }
}
.tag-processing {
  color: @themeColor;
  background: #e6f4ff;
  border-color: #91caff;
  :deep(svg) {
    fill: @themeColor;
  }
}
.tag-error {
  color: #ff4d4f;
  background: #fff2f0;
  border-color: #ffccc7;
  :deep(svg) {
    fill: #ff4d4f;
  }
}
.tag-warning {
  color: #faad14;
  background: #fffbe6;
  border-color: #ffe58f;
  :deep(svg) {
    fill: #faad14;
  }
}
.tag-pink {
  color: #c41d7f;
  background: #fff0f6;
  border-color: #ffadd2;
  :deep(svg) {
    fill: #c41d7f;
  }
}
.tag-red {
  color: #cf1322;
  background: #fff1f0;
  border-color: #ffa39e;
  :deep(svg) {
    fill: #cf1322;
  }
}
.tag-yellow {
  color: #d4b106;
  background: #feffe6;
  border-color: #fffb8f;
  :deep(svg) {
    fill: #d4b106;
  }
}
.tag-orange {
  color: #d46b08;
  background: #fff7e6;
  border-color: #ffd591;
  :deep(svg) {
    fill: #d46b08;
  }
}
.tag-green {
  color: #389e0d;
  background: #f6ffed;
  border-color: #b7eb8f;
  :deep(svg) {
    fill: #389e0d;
  }
}
.tag-cyan {
  color: #08979c;
  background: #e6fffb;
  border-color: #87e8de;
  :deep(svg) {
    fill: #08979c;
  }
}
.tag-blue {
  color: #0958d9;
  background: #e6f4ff;
  border-color: #91caff;
  :deep(svg) {
    fill: #0958d9;
  }
}
.tag-purple {
  color: #531dab;
  background: #f9f0ff;
  border-color: #d3adf7;
  :deep(svg) {
    fill: #531dab;
  }
}
.tag-geekblue {
  color: #1d39c4;
  background: #f0f5ff;
  border-color: #adc6ff;
  :deep(svg) {
    fill: #1d39c4;
  }
}
.tag-magenta {
  color: #eb2f96;
  background: #fff0f6;
  border-color: #ffadd2;
  :deep(svg) {
    fill: #eb2f96;
  }
}
.tag-volcano {
  color: #d4380d;
  background: #fff2e8;
  border-color: #ffbb96;
  :deep(svg) {
    fill: #d4380d;
  }
}
.tag-gold {
  color: #d48806;
  background: #fffbe6;
  border-color: #ffe58f;
  :deep(svg) {
    fill: #d48806;
  }
}
.tag-lime {
  color: #7cb305;
  background: #fcffe6;
  border-color: #eaff8f;
  :deep(svg) {
    fill: #7cb305;
  }
}
.tag-borderless {
  border-color: transparent;
}
.has-color {
  color: #fff;
  border-color: transparent;
  .m-close .u-close {
    fill: rgba(255, 255, 255, .85);
    &:hover {
      fill: rgba(255, 255, 255, 1);
    }
  }
}
.hidden {
  display: none;
}
</style>

在要使用的页面引入

其中引入使用了 Vue3间距(Space)、Vue3分割线(Divider)文章来源地址https://www.toymoban.com/news/detail-603791.html

<script setup lang="ts">
import Tag from './Tag.vue'
import { ref, watchEffect } from 'vue'

const strTags = ref(['天空', '大海', '湖泊'])
watchEffect(() => {
  console.log('strTags', strTags.value)
})
const objTags = ref([
  {
    label: '天空',
    color: 'processing'
  },
  {
    label: '大海',
    closable: false,
    color: 'error'
  },
  {
    label: '湖泊',
    color: 'pink'
  }
])
watchEffect(() => {
  console.log('objTags', objTags.value)
})
const onClose = (e: MouseEvent) => {
  console.log('e', e)
}
const onDynamicClose = (tag: any, index: number) => {
  console.log('tag', tag)  
  console.log('index', index)  
}
</script>
<template>
  <div>
    <h1>Tag 标签</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Space>
      <Tag color="magenta">pink</Tag>
      <Tag>Tag 1</Tag>
      <Tag><a href="https://blog.csdn.net/Dandrose">Link</a></Tag>
      <Tag closable @close="onClose">Tag 2</Tag>
    </Space>
    <h2 class="mt30 mb10">多彩标签</h2>
    <Space>
      <Tag color="pink">pink</Tag>
      <Tag color="red">red</Tag>
      <Tag color="yellow">yellow</Tag>
      <Tag color="orange">orange</Tag>
      <Tag color="cyan">cyan</Tag>
      <Tag color="green">green</Tag>
      <Tag color="blue" closable>blue</Tag>
      <Tag color="purple">purple</Tag>
      <Tag color="geekblue">geekblue</Tag>
      <Tag color="magenta">magenta</Tag>
      <Tag color="volcano">volcano</Tag>
      <Tag color="gold">gold</Tag>
      <Tag color="lime">lime</Tag>
    </Space>
    <br/>
    <br/>
    <Space>
      <Tag color="#f50">#f50</Tag>
      <Tag color="#2db7f5">#2db7f5</Tag>
      <Tag color="#87d068">#87d068</Tag>
      <Tag color="#108ee9">#108ee9</Tag>
    </Space>
    <h2 class="mt30 mb10">预设状态的标签</h2>
    <Divider orientation="left">Without icon</Divider>
    <Space>
      <Tag color="success">success</Tag>
      <Tag color="processing">processing</Tag>
      <Tag color="error">error</Tag>
      <Tag color="warning">warning</Tag>
      <Tag color="default">default</Tag>
    </Space>
    <Divider orientation="left">With icon</Divider>
    <Space>
      <Tag color="success">
        <template #icon>
          <svg focusable="false" class="u-svg" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg>
        </template>
        success
      </Tag>
      <Tag color="processing">
        <template #icon>
          <svg focusable="false" class="u-spin" data-icon="sync" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"></path></svg>
        </template>
        processing
      </Tag>
      <Tag color="error">
        <template #icon>
          <svg focusable="false" class="u-svg" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg>
        </template>
        error
      </Tag>
      <Tag color="warning">
        <template #icon>
          <svg focusable="false" class="u-svg" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg>
        </template>
        warning
      </Tag>
      <Tag color="default">
        <template #icon>
          <svg focusable="false" class="u-svg" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg>
        </template>
        waiting
      </Tag>
      <Tag color="default">
        <template #icon>
          <svg focusable="false" class="u-svg" data-icon="minus-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg>
        </template>
        stop
      </Tag>
    </Space>
    <h2 class="mt30 mb10">动态添加和删除</h2>
    <h3 class="mb10">使用字符串格式数组</h3>
    <Space>
      <Tag dynamic v-model:value="strTags" @dynamic-close="onDynamicClose" />
    </Space>
    <br/>
    <br/>
    <h3 class="mb10">使用对象格式数组</h3>
    <Space>
      <Tag dynamic v-model:value="objTags">
        <template #default="{ label, index }">
          <template v-if="index===1">
            {{ label }} {{ index }}
          </template>
        </template>
        <template #icon="{ index }">
          <template v-if="index===0">
            <svg focusable="false" class="u-svg" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg>
          </template>
        </template>
      </Tag>
    </Space>
    <h2 class="mt30 mb10">三种尺寸</h2>
    <Space>
      <Tag closable size="small" @close="onClose">
        爱在西元前
      </Tag>
      <Tag color="warning" closable @close="onClose">
        超人不会飞
      </Tag>
      <Tag
        color="blue"
        size="large"
        dynamic
        v-model:value="strTags"
        closable
        @close="onDynamicClose" />
    </Space>
    <h2 class="mt30 mb10">自定义动态标签排列方式</h2>
    <Tag
      space-direction="vertical"
      :space-size="12"
      color="blue"
      size="large"
      dynamic
      v-model:value="strTags"
      closable
      @close="onDynamicClose" />
    <h2 class="mt30 mb10">无边框</h2>
    <Space>
      <Tag :bordered="false">Tag 1</Tag>
      <Tag :bordered="false">Tag 2</Tag>
      <Tag :bordered="false" closable>Tag 3</Tag>
      <Tag :bordered="false" closable>Tag 4</Tag>
    </Space>
    <Divider />
    <Space>
      <Tag :bordered="false" color="processing">processing</Tag>
      <Tag :bordered="false" color="success">success</Tag>
      <Tag :bordered="false" color="error">error</Tag>
      <Tag :bordered="false" color="warning">warning</Tag>
      <Tag :bordered="false" color="magenta">magenta</Tag>
      <Tag :bordered="false" color="red">red</Tag>
      <Tag :bordered="false" color="volcano">volcano</Tag>
      <Tag :bordered="false" color="orange">orange</Tag>
      <Tag :bordered="false" color="gold">gold</Tag>
      <Tag :bordered="false" color="lime">lime</Tag>
      <Tag :bordered="false" color="green">green</Tag>
      <Tag :bordered="false" color="cyan">cyan</Tag>
      <Tag :bordered="false" color="blue">blue</Tag>
      <Tag :bordered="false" color="geekblue">geekblue</Tag>
      <Tag :bordered="false" color="purple">purple</Tag>
    </Space>
  </div>
</template>
<style lang="less" scoped>
.u-svg {
  display: inline-block;
  line-height: 1;
}
.u-spin {
  width: 12px;
  height: 12px;
  display: inline-block;
  line-height: 1;
  -webkit-animation: loadingCircle 1s infinite linear;
  animation: loadingCircle 1s infinite linear;
  @keyframes loadingCircle {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}
</style>

到了这里,关于Vue3标签(Tag)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

    今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范,需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复,需要使用husky来做commit拦截,需要使用commitlint来统一提交规范,需要使用preinstall来统一包管理工具。 下面我们就用这一套规范

    2024年02月22日
    浏览(81)
  • vue3 + ts

    在 vue3.2 中,我们只需在script标签中添加setup。就可以做到,组件只需引入不用注册,属性和方法也不用 return 才能于 template 中使用,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得。 一、模板语法 1.使用 JavaScript 表达式 我们仅在

    2024年02月07日
    浏览(41)
  • 前端vue3+typescript架构

    1、vue creat 项目名称 选择自定义  选择需要的依赖  选择vue3  一路enter,选择eslist+prettier  继续enter,等待安装 按步骤操作,项目启动成功  2、vscode安装5款插件  2、代码保存自动格式化,保证每个开发人员代码一致,根目录新建三个文件.editorconfig和.prettierrc和.prettierignore

    2024年02月11日
    浏览(38)
  • csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

    大家好,我是yma16,本文分享利用inscode搭建vue3(ts)+antd前端模板。 2023 新星计划 vue(ts)+antd赛道报名入口:https://bbs.csdn.net/topics/616574177 搭建vue3+ts+antd的指引:认识vite_vue3 初始化项目到打包 InsCode 是一个一站式的软件开发服务平台,从开发-部署-运维-运营,都可以在 InsCode 轻松

    2024年02月16日
    浏览(47)
  • Vue3 +TypeScript 引入 BabylonJs(Vue3实现3D)【一篇文章精通系列】

    本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果。结合实际案例,详细讲解了如何在Vue3项目中引入BabylonJs,并了解其相关知识。通过本文的学习,相信读者可以轻松掌握Vue3实现3D效果以及BabylonJs的相关知识。 1、创建Vue3 + TypeScript项目 将生成的js文件都修改为

    2024年02月04日
    浏览(41)
  • vue3+ts:shims-vue.d.ts

    一、本文引子 uniapp(3.8.4.20230531)+ vue3 + ts + vite 项目 在搭建这个base项目的时候出现红素波浪线如图,代码运行正常,但是看起来很难受,于是各种查找,能找到的资料很少,可能和我提问不够准确也有关系,有人说删除tsconfig.js就可以了,我测试了,结果真的可以,但是这

    2024年02月10日
    浏览(40)
  • Vue3项目中使用TypeScript

    在单文件组件中使用 TypeScript,需要在 小结: 注意 当 script 中使用了 ts ,模板 template 在绑定表达式时也支持ts。 如果在表达式中不指名类型时,编译器会报警告提示。 正确写法 表达式指定类型 基于运行时声明 当使用 基于类型声明 通过泛型来定义 Props 语法规定 传递给

    2023年04月20日
    浏览(38)
  • vue3+ts 实现枚举

    首先 index.ts 中定义枚举 接口返给的数据是一个对象

    2024年02月14日
    浏览(45)
  • vue3 vite ts引入vue文件报错 ts(2307)

    vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行。 官方文档有说明:http://vue.dragonlm.com/guide/typescript/overview.html#ide-support 解决方法是安装插件,之后即可正常解析路径,并可以跳转到对应文件。 TypeScript Vue Plugin (Volar)

    2024年02月16日
    浏览(53)
  • vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

    技术栈 :Vue3 + Ts + Vite + Echarts 简介 : 图文详解,教你如何在 Vue3 项目中 引入Echarts , 封装Echarts组件 ,并实现常用Echarts图例 1.1 静态效果 1.2 动态效果 2.1 安装 Echarts npm: pnpm: 2.2 main.ts 中引入 2.3 Echarts 组件封装 /src/components/ReEcharts/index.vue 文件中写入如下代码 3.1 柱状图 实现

    2024年02月09日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包