forked from opentiny/tiny-vue
docs(tag): [tag] tag docs optimization (#768)
This commit is contained in:
chenxi-20
GitHub
parent
f627c79c2f
commit
e465e77410
|
|
@ -77,7 +77,7 @@ export default {
|
|||
codeFiles: ['create.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'closeable',
|
||||
demoId: 'closable',
|
||||
name: {
|
||||
'zh-CN': '可移除标签',
|
||||
'en-US': 'events'
|
||||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
'zh-CN': '<p>`closable` 属性可以为标签设置成可去除标签。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['closeable.vue']
|
||||
codeFiles: ['closable.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'tag-event-click',
|
||||
|
|
|
|||
|
|
@ -252,8 +252,8 @@ export default {
|
|||
hit: 'hit',
|
||||
color: 'color3',
|
||||
type: 'type',
|
||||
closeable: 'closeable',
|
||||
createable: 'closeable',
|
||||
closable: 'closable',
|
||||
createable: 'closable',
|
||||
effect: 'effect',
|
||||
disabled: 'disabled',
|
||||
mode: 'border',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,19 @@
|
|||
<template>
|
||||
<tiny-tag>标签</tiny-tag>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag size="medium"> 中等标签 </tiny-tag>
|
||||
<tiny-tag> 默认标签 </tiny-tag>
|
||||
<tiny-tag size="small"> 小型标签 </tiny-tag>
|
||||
<tiny-tag size="mini"> 超小标签 </tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tag as TinyTag } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tiny-tag-demo .tiny-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('progress 正常显示', async ({ page }) => {
|
||||
test('各型号尺寸是否正常', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('http://127.0.0.1:7130/pc/tag/basic-usage')
|
||||
await page.goto('tag#basic-usage')
|
||||
|
||||
const tag = page.locator('#preview').getByText('标签')
|
||||
const normal = page.getByText('默认标签')
|
||||
const medium = page.getByText('中等标签')
|
||||
const small = page.getByText('小型标签')
|
||||
const mini = page.getByText('超小标签')
|
||||
|
||||
await expect(tag).toBeVisible()
|
||||
await expect(normal).toHaveCSS('height', '22px')
|
||||
await expect(medium).toHaveCSS('height', '24px')
|
||||
await expect(small).toHaveCSS('height', '20px')
|
||||
await expect(mini).toHaveCSS('height', '16px')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<tiny-tag>标签</tiny-tag>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag size="medium"> 中等标签 </tiny-tag>
|
||||
<tiny-tag> 默认标签 </tiny-tag>
|
||||
<tiny-tag size="small"> 小型标签 </tiny-tag>
|
||||
<tiny-tag size="mini"> 超小标签 </tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -11,3 +16,10 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tiny-tag-demo .tiny-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="handleClose1(tag)">
|
||||
{{ tag.name }}
|
||||
</tiny-tag>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="handleClose(tag)">{{
|
||||
tag.name
|
||||
}}</tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ const tags = ref([
|
|||
{ name: '标签五', type: 'danger' }
|
||||
])
|
||||
|
||||
function handleClose1(tag) {
|
||||
function handleClose(tag) {
|
||||
tags.value.splice(tags.value.indexOf(tag), 1)
|
||||
Modal.message('close 事件')
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('close 事件触发弹窗并移除元素', async ({ page }) => {
|
||||
test('是否正常移除标签', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('tag#tag-event-close')
|
||||
await page.goto('tag#closable')
|
||||
|
||||
const first = page.locator('.tiny-tag').filter({ hasText: '标签一' })
|
||||
const close = first.locator('.tiny-tag__close')
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="handleClose1(tag)">
|
||||
{{ tag.name }}
|
||||
</tiny-tag>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="handleClose(tag)">{{
|
||||
tag.name
|
||||
}}</tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose1(tag) {
|
||||
handleClose(tag) {
|
||||
this.tags.splice(this.tags.indexOf(tag), 1)
|
||||
Modal.message('close 事件')
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="handleClose1(tag)">{{
|
||||
tag.name
|
||||
}}</tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Tag as TinyTag } from '@opentiny/vue'
|
||||
|
||||
const tags = ref([
|
||||
{ name: '标签一', type: '' },
|
||||
{ name: '标签二', type: 'success' },
|
||||
{ name: '标签三', type: 'info' },
|
||||
{ name: '标签四', type: 'warning' },
|
||||
{ name: '标签五', type: 'danger' }
|
||||
])
|
||||
|
||||
function handleClose1(tag) {
|
||||
tags.value.splice(tags.value.indexOf(tag), 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tag + .tiny-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('是否正常移除标签', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('tag#closeable')
|
||||
|
||||
const tag = page.locator('.tiny-tag').filter({ hasText: '标签一' })
|
||||
const close = tag.locator('.tiny-tag__close')
|
||||
|
||||
await close.click()
|
||||
await expect(tag, 'Deletion failed').not.toBeVisible()
|
||||
})
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="handleClose1(tag)">{{
|
||||
tag.name
|
||||
}}</tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tag } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTag: Tag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ name: '标签一', type: '' },
|
||||
{ name: '标签二', type: 'success' },
|
||||
{ name: '标签三', type: 'info' },
|
||||
{ name: '标签四', type: 'warning' },
|
||||
{ name: '标签五', type: 'danger' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose1(tag) {
|
||||
this.tags.splice(this.tags.indexOf(tag), 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tag + .tiny-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<tiny-tag color="rgba(82,196,26,0.8)">自定义背景色</tiny-tag>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
|
||||
<tiny-tag type="success" hit>标签二</tiny-tag>
|
||||
<tiny-tag type="info" hit>标签三</tiny-tag>
|
||||
<tiny-tag type="warning" hit>标签四</tiny-tag>
|
||||
<tiny-tag type="danger" hit>标签五</tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,20 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('是否自定义背景色', async ({ page }) => {
|
||||
test('边框和自定义背景色', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('http://127.0.0.1:7130/pc/tag/color3')
|
||||
await page.goto('tag#color3')
|
||||
|
||||
const tag = page.locator('.tiny-tag')
|
||||
const tags = page.locator('.tiny-tag')
|
||||
const first = tags.nth(0)
|
||||
|
||||
await expect(tag).toHaveCSS('background-color', 'rgba(82, 196, 26, 0.8)')
|
||||
await expect(tags).toHaveClass([
|
||||
/tiny-tag/,
|
||||
/tiny-tag--success/,
|
||||
/tiny-tag--info/,
|
||||
/tiny-tag--warning/,
|
||||
/tiny-tag--danger/
|
||||
])
|
||||
await expect(tags).toHaveClass([/is-hit/, /is-hit/, /is-hit/, /is-hit/, /is-hit/])
|
||||
await expect(first).toHaveCSS('background-color', 'rgba(82, 196, 26, 0.8)')
|
||||
await expect(first).toHaveCSS('border-color', 'rgb(87, 93, 108)')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<tiny-tag color="rgba(82,196,26,0.8)">自定义背景色</tiny-tag>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
|
||||
<tiny-tag type="success" hit>标签二</tiny-tag>
|
||||
<tiny-tag type="info" hit>标签三</tiny-tag>
|
||||
<tiny-tag type="warning" hit>标签四</tiny-tag>
|
||||
<tiny-tag type="danger" hit>标签五</tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('progress 正常显示', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('http://127.0.0.1:7130/pc/tag/content')
|
||||
await page.goto('tag#content')
|
||||
|
||||
const tag = page.locator('#preview').getByText('配置式标签')
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<span>Light </span>
|
||||
<div class="tiny-tag-demo">
|
||||
<span>Light：</span>
|
||||
<tiny-tag v-for="item in items" :key="'tiny-tag1-' + item.label" :type="item.type" effect="light">
|
||||
{{ item.label }}
|
||||
</tiny-tag>
|
||||
<br />
|
||||
<span>Dark </span>
|
||||
<span>Dark：</span>
|
||||
<tiny-tag v-for="item in items" :key="'tiny-tag2-' + item.label" :type="item.type" effect="dark">
|
||||
{{ item.label }}
|
||||
</tiny-tag>
|
||||
<br />
|
||||
<span>Plain </span>
|
||||
<span>Plain：</span>
|
||||
<tiny-tag v-for="item in items" :key="'tiny-tag3-' + item.label" :type="item.type" effect="plain">
|
||||
{{ item.label }}
|
||||
</tiny-tag>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<span>Light </span>
|
||||
<div class="tiny-tag-demo">
|
||||
<span>Light：</span>
|
||||
<tiny-tag v-for="item in items" :key="'tiny-tag1-' + item.label" :type="item.type" effect="light">
|
||||
{{ item.label }}
|
||||
</tiny-tag>
|
||||
<br />
|
||||
<span>Dark </span>
|
||||
<span>Dark：</span>
|
||||
<tiny-tag v-for="item in items" :key="'tiny-tag2-' + item.label" :type="item.type" effect="dark">
|
||||
{{ item.label }}
|
||||
</tiny-tag>
|
||||
<br />
|
||||
<span>Plain </span>
|
||||
<span>Plain：</span>
|
||||
<tiny-tag v-for="item in items" :key="'tiny-tag3-' + item.label" :type="item.type" effect="plain">
|
||||
{{ item.label }}
|
||||
</tiny-tag>
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tag :hit="true">标签一</tiny-tag>
|
||||
<tiny-tag type="success" :hit="true">标签二</tiny-tag>
|
||||
<tiny-tag type="info" :hit="true">标签三</tiny-tag>
|
||||
<tiny-tag type="warning" :hit="true">标签四</tiny-tag>
|
||||
<tiny-tag type="danger" :hit="true">标签五</tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tag as TinyTag } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('是否存在边框', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('http://127.0.0.1:7130/pc/tag/hit')
|
||||
|
||||
const tags = page.locator('.tiny-tag')
|
||||
const normal = tags.nth(0)
|
||||
|
||||
await expect(tags).toHaveClass([
|
||||
/tiny-tag/,
|
||||
/tiny-tag--success/,
|
||||
/tiny-tag--info/,
|
||||
/tiny-tag--warning/,
|
||||
/tiny-tag--danger/
|
||||
])
|
||||
await expect(tags).toHaveClass([/is-hit/, /is-hit/, /is-hit/, /is-hit/, /is-hit/])
|
||||
await expect(normal).toHaveCSS('border-color', 'rgb(87, 93, 108)')
|
||||
})
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tag :hit="true">标签一</tiny-tag>
|
||||
<tiny-tag type="success" :hit="true">标签二</tiny-tag>
|
||||
<tiny-tag type="info" :hit="true">标签三</tiny-tag>
|
||||
<tiny-tag type="warning" :hit="true">标签四</tiny-tag>
|
||||
<tiny-tag type="danger" :hit="true">标签五</tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tag } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTag: Tag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag size="small" :disabled="disabled" class="first">
|
||||
<tiny-icon-fileupload class="tiny-svg-size left" />标签 <tiny-icon-chevron-right class="tiny-svg-size right" />
|
||||
</tiny-tag>
|
||||
|
|
@ -24,9 +24,6 @@ const TinyIconChevronRight = iconChevronRight()
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tag {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.first {
|
||||
color: #a25203;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag size="small" :disabled="disabled" class="first">
|
||||
<icon-fileupload class="tiny-svg-size left" />标签 <icon-chevron-right class="tiny-svg-size right" />
|
||||
</tiny-tag>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @click="handleClick">
|
||||
{{ tag.name }}
|
||||
</tiny-tag>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @click="handleClick">
|
||||
{{ tag.name }}
|
||||
</tiny-tag>
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tag> 默认标签 </tiny-tag>
|
||||
<tiny-tag size="medium"> 中等标签 </tiny-tag>
|
||||
<tiny-tag size="small"> 小型标签 </tiny-tag>
|
||||
<tiny-tag size="mini"> 超小标签 </tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Tag as TinyTag } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tag {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('是否存在边框', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('http://127.0.0.1:7130/pc/tag/tag-size')
|
||||
|
||||
const normal = page.getByText('默认标签')
|
||||
const medium = page.getByText('中等标签')
|
||||
const small = page.getByText('小型标签')
|
||||
const mini = page.getByText('超小标签')
|
||||
|
||||
await expect(normal).toHaveCSS('height', '22px')
|
||||
await expect(medium).toHaveCSS('height', '24px')
|
||||
await expect(small).toHaveCSS('height', '20px')
|
||||
await expect(mini).toHaveCSS('height', '16px')
|
||||
})
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-tag> 默认标签 </tiny-tag>
|
||||
<tiny-tag size="medium"> 中等标签 </tiny-tag>
|
||||
<tiny-tag size="small"> 小型标签 </tiny-tag>
|
||||
<tiny-tag size="mini"> 超小标签 </tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Tag } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTag: Tag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-tag {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,4 +4,4 @@ title: Tag 标签
|
|||
|
||||
# Tag 标签
|
||||
|
||||
<div>Tag 标签组件，用于标记事物的属性和维度</div>
|
||||
<div>用于标记事物的属性和维度</div>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ title: Tag
|
|||
|
||||
# Tag
|
||||
|
||||
<div>Tag tag component, used to mark transaction attributes and dimensions</div>
|
||||
<div>Used to mark transaction attributes and dimensions</div>
|
||||
|
|
|
|||
|
|
@ -5,102 +5,89 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>size</code>设置尺寸大小，可选值：<code>(medium / small / mini)</code>。',
|
||||
'en-US': 'Set the size through<code>size</code>, with optional values:<code>(medium/small/mini)</code>.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'color3',
|
||||
'name': { 'zh-CN': '颜色', 'en-US': 'Color' },
|
||||
'demoId': 'content',
|
||||
'name': { 'zh-CN': '配置式', 'en-US': 'Bind Value' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>color</code> 设置标签背景色。</p>\n',
|
||||
'en-US': '<p>You can use <code>color</code> to set the background color of a label. </p>\n'
|
||||
'zh-CN': '通过<code>value</code>设置标签值。',
|
||||
'en-US': 'Set label values through<code>value</code>. '
|
||||
},
|
||||
'codeFiles': ['content.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'color3',
|
||||
'name': { 'zh-CN': '背景色与边框', 'en-US': 'Background color and border' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>color</code>设置背景色，<code>hit</code>设置边框。',
|
||||
'en-US': 'Set the size through<code>size</code>, with optional values:<code>(medium/small/mini)</code>.'
|
||||
},
|
||||
'codeFiles': ['color3.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'hit',
|
||||
'name': { 'zh-CN': '边框', 'en-US': 'Border' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>hit</code> 设置标签边框，可选值（true/false）true为有边框，false无边框,默认值为 false。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can use <code>hit</code> to set the label border. The options are true and false. The default value is false. </p>\n'
|
||||
},
|
||||
'codeFiles': ['hit.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tag-size',
|
||||
'name': { 'zh-CN': '尺寸', 'en-US': 'Dimension' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>size</code> 设置Tag标签大小，可选值（medium / small / mini）。</p>\n',
|
||||
'en-US': '<p>You can use <code>size</code> to set the tag size. The value can be medium, small, or mini. </p>\n'
|
||||
},
|
||||
'codeFiles': ['tag-size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'effect',
|
||||
'name': { 'zh-CN': '主题', 'en-US': 'Subject' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>effect</code> 设置Tag标签主题，可选值（dark / light / plain）。\n<code>type</code>可以为标签设置相应的类型，可选值（success / info / warning / danger）。</p>\n',
|
||||
'通过<code>effect</code>设置主题，可选值：<code>(dark / light / plain)</code>；<code>type</code>设置类型，可选值：<code>(success / info / warning / danger)</code>。',
|
||||
'en-US':
|
||||
'<p>You can use <code>effect</code> to set the tag theme. The value can be dark, light, or plain. \n<code>type</code>You can set the corresponding type for the tag. The options are success, info, warning, and danger. </p>\n'
|
||||
'Set the theme through<code>effect</code>, with optional values:<code>(dark/light/plain)</code>< Code>type</code>Set the type, optional values:<code>(success/info/warning/danger)</code>.'
|
||||
},
|
||||
'codeFiles': ['effect.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'create',
|
||||
'name': { 'zh-CN': '动态编辑标签', 'en-US': 'Dynamic Edit Tag' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过点击<code>+ New Tag</code>在文本框中输入你要定义的标签名就能在标签列表中最后一个创建标签 。<code>closable</code> 属性可以为标签设置成可去除标签。</p>\n',
|
||||
'en-US':
|
||||
'<p>Click <code>+ New Tag</code> and enter the tag name in the text box to create the last tag in the tag list. The <code>closable</code> attribute can be set to removeable tags for tags. </p>\n'
|
||||
},
|
||||
'codeFiles': ['create.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'closeable',
|
||||
'name': { 'zh-CN': '可移除标签', 'en-US': 'Removable Label' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['closeable.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'disabled',
|
||||
'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>disabled</code> 设置标签禁用。</p>\n',
|
||||
'en-US': '<p>You can set <code>disabled</code> to disable the tag. </p>\n'
|
||||
'zh-CN': '通过<code>disabled</code>设置禁用。',
|
||||
'en-US': 'You can set<code>disabled</code>to disable. '
|
||||
},
|
||||
'codeFiles': ['disabled.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'content',
|
||||
'name': { 'zh-CN': '绑定值', 'en-US': 'Bound Value' },
|
||||
'demoId': 'closable',
|
||||
'name': { 'zh-CN': '移除', 'en-US': 'Remove' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>value</code> 自定义标签值，主要用于配置式。</p>\n',
|
||||
'zh-CN': '通过<code>closable</code>设置展示关闭按钮，<code>close</code>监听关闭按钮点击事件，做删除操作。',
|
||||
'en-US':
|
||||
'<p>You can use <code>value</code> to customize the tag value, which is mainly used in profiles. </p>\n'
|
||||
'Set the display close button through<code>close</code>, listen to the close button click event, and perform the deletion operation.'
|
||||
},
|
||||
'codeFiles': ['content.vue']
|
||||
'codeFiles': ['closable.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'create',
|
||||
'name': { 'zh-CN': '动态编辑', 'en-US': 'Dynamic Edit' },
|
||||
'desc': {
|
||||
'zh-CN': `添加新标签：监听<code>+ New Tag</code>元素点击事件，打开<code>input</code>输入框，监听输入框事件做添加操作；<br />
|
||||
修改旧标签：监听旧标签的双击事件，打开<code>input</code>输入框，监听输入框事件做修改操作。`,
|
||||
'en-US': `Add a new tag: listen for<code>+New Tag</code>element click events, open the<code>input</code>input box, and listen for input box events to add< Br/>
|
||||
Modify old tags: listen for double click events on old tags, open the<code>input</code>input box, and listen for input box events to make modifications.`
|
||||
},
|
||||
'codeFiles': ['create.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'slot-default',
|
||||
'name': { 'zh-CN': '图标标签（使用默认插槽）', 'en-US': 'Icon label (default slot)' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'name': { 'zh-CN': '图标型', 'en-US': 'Icon type' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>default</code>默认插槽自定义标签内容，生成图标标签。',
|
||||
'en-US':
|
||||
'Generate icon labels by customizing the label content for the default slot through<code>default</code>.'
|
||||
},
|
||||
'codeFiles': ['slot-default.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tag-event-click',
|
||||
'name': { 'zh-CN': 'Click 事件', 'en-US': 'Click Event' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['tag-event-click.vue']
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>click</code>监听点击事件。',
|
||||
'en-US': 'Listen for click events through<code>click</code>.'
|
||||
},
|
||||
{
|
||||
'demoId': 'tag-event-close',
|
||||
'name': { 'zh-CN': 'Close 事件', 'en-US': 'Close Event' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['tag-event-close.vue']
|
||||
'codeFiles': ['tag-event-click.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
|
@ -109,97 +96,97 @@ export default {
|
|||
'type': 'component',
|
||||
'properties': [
|
||||
{
|
||||
'name': 'hit',
|
||||
'name': 'closable',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': { 'zh-CN': '是否有边框描边', 'en-US': 'Whether there is a border stroke' },
|
||||
'demoId': 'hit'
|
||||
},
|
||||
{
|
||||
'name': 'closeable',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '是否可关闭', 'en-US': 'Can be disabled' },
|
||||
'demoId': 'create'
|
||||
'demoId': 'closable'
|
||||
},
|
||||
{
|
||||
'name': 'color',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '颜色，支持 rgb,rgba,hex 三种格式;背景色',
|
||||
'en-US': 'Color. The value can be in rgb, rgba, or hex format. Background color'
|
||||
'zh-CN': '背景色：rgb,rgba,hex 三种格式',
|
||||
'en-US': 'Background color: The value can be in rgb, rgba, or hex format'
|
||||
},
|
||||
'demoId': 'color3'
|
||||
},
|
||||
{
|
||||
'name': 'type',
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '是否禁用', 'en-US': 'Whether to disable' },
|
||||
'demoId': 'disabled'
|
||||
},
|
||||
{
|
||||
'name': 'effect',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'defaultValue': 'light',
|
||||
'desc': {
|
||||
'zh-CN': '显示类型;该属性的可选值为 success / info / warning / danger',
|
||||
'en-US': 'Display type; The value of this attribute can be success / info / warning / danger'
|
||||
'zh-CN': '主题：该属性的可选值为 dark / light / plain',
|
||||
'en-US': 'Subject: The optional values of this attribute are dark / light / plain'
|
||||
},
|
||||
'demoId': 'effect'
|
||||
},
|
||||
{
|
||||
'name': 'hit',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '是否有边框', 'en-US': 'Whether there is a border stroke' },
|
||||
'demoId': 'color3'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '尺寸;该属性的可选值为 medium / small / mini',
|
||||
'en-US': 'Size; The optional values of this attribute are medium / small / mini'
|
||||
'zh-CN': '尺寸：该属性的可选值为 medium / small / mini',
|
||||
'en-US': 'Size: The optional values of this attribute are medium / small / mini'
|
||||
},
|
||||
'demoId': 'tag-size'
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'effect',
|
||||
'name': 'type',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 light',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '主题;该属性的可选值为 dark / light / plain',
|
||||
'en-US': 'Subject; The optional values of this attribute are dark / light / plain'
|
||||
'zh-CN': '显示类型：该属性的可选值为 success / info / warning / danger',
|
||||
'en-US': 'Display type: The value of this attribute can be success / info / warning / danger'
|
||||
},
|
||||
'demoId': 'effect'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': { 'zh-CN': '是否禁用', 'en-US': 'Whether to disable' },
|
||||
'demoId': 'disabled'
|
||||
},
|
||||
{
|
||||
'name': 'value',
|
||||
'type': 'number, string',
|
||||
'type': 'number | string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '通过绑定此属性设置自定义内容【3.9.1新增】',
|
||||
'en-US': 'Set customized content by binding this attribute. [Added in 3.9.1]'
|
||||
'zh-CN': '配置式标签，自定义标签内容【3.9.1新增】',
|
||||
'en-US': 'Configurable labels, custom label content [Added in 3.9.1]'
|
||||
},
|
||||
'demoId': 'content'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'close',
|
||||
'type': 'Function(event)',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '关闭 Tag 时触发的事件;event: 原生事件',
|
||||
'en-US': 'This event is triggered when a tag is disabled. event: Native event'
|
||||
},
|
||||
'demoId': 'tag-event-close'
|
||||
},
|
||||
{
|
||||
'name': 'click',
|
||||
'type': 'Function(value, vm)',
|
||||
'type': '(event: Event) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '点击 Tag 时触发的事件;event: 原生事件',
|
||||
'en-US': 'This event is triggered when a tag is clicked. event: Native event'
|
||||
'zh-CN': '点击标签时触发的事件',
|
||||
'en-US': 'Event triggered when clicking on Tag'
|
||||
},
|
||||
'demoId': 'tag-event-click'
|
||||
},
|
||||
{
|
||||
'name': 'close',
|
||||
'type': '(event: Event)) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '点击关闭按钮时触发的事件',
|
||||
'en-US': 'Event triggered when the close button is clicked'
|
||||
},
|
||||
'demoId': 'closable'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ export const handleClose =
|
|||
export const handleClick =
|
||||
({ emit, props, parent, state }: Pick<ITagRenderlessParams, 'emit' | 'props' | 'parent' | 'state'>) =>
|
||||
(event: Event) => {
|
||||
if (!props.selectable || props.disabled) return
|
||||
// pc端没有selectable属性，不能以取反判断，会阻止pc的点击事件
|
||||
if (props.selectable === false || props.disabled) return
|
||||
|
||||
parent.$parent && parent.$parent.tagSelectable && event.stopPropagation()
|
||||
state.selected = !state.selected
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ describe('PC Mode', () => {
|
|||
})
|
||||
|
||||
// props
|
||||
test.todo('closeable 是否可关闭')
|
||||
test.todo('closable 是否可关闭')
|
||||
|
||||
test.todo('color 颜色，支持 rgb,rgba,hex 三种格式;背景色')
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue