mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-26 12:32:17 +08:00
feat(components): [check-tag] add type prop (#15727)
* feat(components): [check-tag] add type prop * feat(components): update
This commit is contained in:
kooriookami
@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<el-tag>Tag 1</el-tag>
|
||||
<el-tag class="ml-2" type="success">Tag 2</el-tag>
|
||||
<el-tag class="ml-2" type="info">Tag 3</el-tag>
|
||||
<el-tag class="ml-2" type="warning">Tag 4</el-tag>
|
||||
<el-tag class="ml-2" type="danger">Tag 5</el-tag>
|
||||
<div class="flex gap-2">
|
||||
<el-tag type="primary">Tag 1</el-tag>
|
||||
<el-tag type="success">Tag 2</el-tag>
|
||||
<el-tag type="info">Tag 3</el-tag>
|
||||
<el-tag type="warning">Tag 4</el-tag>
|
||||
<el-tag type="danger">Tag 5</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
@ -1,16 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-check-tag checked style="margin-right: 8px">Checked</el-check-tag>
|
||||
<div class="flex gap-2">
|
||||
<el-check-tag checked>Checked</el-check-tag>
|
||||
<el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-4">
|
||||
<el-check-tag :checked="checked1" type="primary" @change="onChange1">
|
||||
Tag 1
|
||||
</el-check-tag>
|
||||
<el-check-tag :checked="checked2" type="success" @change="onChange2">
|
||||
Tag 2
|
||||
</el-check-tag>
|
||||
<el-check-tag :checked="checked3" type="info" @change="onChange3">
|
||||
Tag 3
|
||||
</el-check-tag>
|
||||
<el-check-tag :checked="checked4" type="warning" @change="onChange4">
|
||||
Tag 4
|
||||
</el-check-tag>
|
||||
<el-check-tag :checked="checked5" type="danger" @change="onChange5">
|
||||
Tag 5
|
||||
</el-check-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const checked = ref(false)
|
||||
const checked1 = ref(true)
|
||||
const checked2 = ref(true)
|
||||
const checked3 = ref(true)
|
||||
const checked4 = ref(true)
|
||||
const checked5 = ref(true)
|
||||
|
||||
const onChange = (status: boolean) => {
|
||||
checked.value = status
|
||||
}
|
||||
|
||||
const onChange1 = (status: boolean) => {
|
||||
checked1.value = status
|
||||
}
|
||||
|
||||
const onChange2 = (status: boolean) => {
|
||||
checked2.value = status
|
||||
}
|
||||
|
||||
const onChange3 = (status: boolean) => {
|
||||
checked3.value = status
|
||||
}
|
||||
|
||||
const onChange4 = (status: boolean) => {
|
||||
checked4.value = status
|
||||
}
|
||||
|
||||
const onChange5 = (status: boolean) => {
|
||||
checked5.value = status
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
<template>
|
||||
<el-tag
|
||||
v-for="tag in dynamicTags"
|
||||
:key="tag"
|
||||
class="mx-1"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
<el-input
|
||||
v-if="inputVisible"
|
||||
ref="InputRef"
|
||||
v-model="inputValue"
|
||||
class="ml-1 w-20"
|
||||
size="small"
|
||||
@keyup.enter="handleInputConfirm"
|
||||
@blur="handleInputConfirm"
|
||||
/>
|
||||
<el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
|
||||
+ New Tag
|
||||
</el-button>
|
||||
<div class="flex gap-2">
|
||||
<el-tag
|
||||
v-for="tag in dynamicTags"
|
||||
:key="tag"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
<el-input
|
||||
v-if="inputVisible"
|
||||
ref="InputRef"
|
||||
v-model="inputValue"
|
||||
class="w-20"
|
||||
size="small"
|
||||
@keyup.enter="handleInputConfirm"
|
||||
@blur="handleInputConfirm"
|
||||
/>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput">
|
||||
+ New Tag
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -1,20 +1,16 @@
|
||||
<template>
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag.name"
|
||||
class="mx-1"
|
||||
closable
|
||||
:type="tag.type"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</el-tag>
|
||||
<div class="flex gap-2">
|
||||
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
|
||||
{{ tag.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const tags = ref([
|
||||
{ name: 'Tag 1', type: '' },
|
||||
{ name: 'Tag 1', type: 'primary' },
|
||||
{ name: 'Tag 2', type: 'success' },
|
||||
{ name: 'Tag 3', type: 'info' },
|
||||
{ name: 'Tag 4', type: 'warning' },
|
||||
|
||||
@ -1,34 +1,31 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap gap-2 my-2">
|
||||
<div class="flex gap-2">
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
class="mx-1"
|
||||
effect="dark"
|
||||
round
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="flex gap-2 mt-4">
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
class="mx-1"
|
||||
effect="light"
|
||||
round
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 my-2">
|
||||
<div class="flex gap-2 mt-4">
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
class="mx-1"
|
||||
effect="plain"
|
||||
round
|
||||
>
|
||||
@ -45,10 +42,10 @@ import type { TagProps } from 'element-plus'
|
||||
type Item = { type: TagProps['type']; label: string }
|
||||
|
||||
const items = ref<Array<Item>>([
|
||||
{ type: '', label: 'Tag 1' },
|
||||
{ type: 'primary', label: 'Tag 1' },
|
||||
{ type: 'success', label: 'Tag 2' },
|
||||
{ type: 'info', label: 'Tag 3' },
|
||||
{ type: 'danger', label: 'Tag 4' },
|
||||
{ type: 'warning', label: 'Tag 5' },
|
||||
{ type: 'warning', label: 'Tag 4' },
|
||||
{ type: 'danger', label: 'Tag 5' },
|
||||
])
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-tag class="mx-1" size="large">Large</el-tag>
|
||||
<el-tag class="mx-1">Default</el-tag>
|
||||
<el-tag class="mx-1" size="small">Small</el-tag>
|
||||
</el-row>
|
||||
|
||||
<el-row class="mt-4">
|
||||
<el-tag class="mx-1" size="large" closable>Large</el-tag>
|
||||
<el-tag class="mx-1" closable>Default</el-tag>
|
||||
<el-tag class="mx-1" size="small" closable>Small</el-tag>
|
||||
</el-row>
|
||||
<div class="flex gap-2">
|
||||
<el-tag size="large">Large</el-tag>
|
||||
<el-tag>Default</el-tag>
|
||||
<el-tag size="small">Small</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,69 +1,36 @@
|
||||
<template>
|
||||
<div class="tag-group my-2 flex flex-wrap gap-1 items-center">
|
||||
<span class="tag-group__title m-1 line-height-2">Dark</span>
|
||||
<div class="flex gap-2">
|
||||
<span>Dark</span>
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
class="mx-1"
|
||||
effect="dark"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
class="mx-1"
|
||||
effect="dark"
|
||||
closable
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="tag-group my-2 flex flex-wrap gap-1 items-center">
|
||||
<span class="tag-group__title m-1">Light</span>
|
||||
<div class="flex gap-2 mt-4">
|
||||
<span>Light</span>
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
class="mx-1"
|
||||
:type="item.type"
|
||||
effect="light"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
class="mx-1"
|
||||
:type="item.type"
|
||||
effect="light"
|
||||
closable
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="tag-group my-2 flex flex-wrap gap-1 items-center">
|
||||
<span class="tag-group__title m-1">Plain</span>
|
||||
<div class="flex gap-2 mt-4">
|
||||
<span>Plain</span>
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
class="mx-1"
|
||||
:type="item.type"
|
||||
effect="plain"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
class="mx-1"
|
||||
:type="item.type"
|
||||
effect="plain"
|
||||
closable
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -75,10 +42,10 @@ import type { TagProps } from 'element-plus'
|
||||
type Item = { type: TagProps['type']; label: string }
|
||||
|
||||
const items = ref<Array<Item>>([
|
||||
{ type: '', label: 'Tag 1' },
|
||||
{ type: 'primary', label: 'Tag 1' },
|
||||
{ type: 'success', label: 'Tag 2' },
|
||||
{ type: 'info', label: 'Tag 3' },
|
||||
{ type: 'danger', label: 'Tag 4' },
|
||||
{ type: 'warning', label: 'Tag 5' },
|
||||
{ type: 'warning', label: 'Tag 4' },
|
||||
{ type: 'danger', label: 'Tag 5' },
|
||||
])
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user