diff --git a/examples/sites/demos/apis/tag.js b/examples/sites/demos/apis/tag.js index fb6e0acbaf..fbfc236129 100644 --- a/examples/sites/demos/apis/tag.js +++ b/examples/sites/demos/apis/tag.js @@ -175,6 +175,21 @@ export default { mode: ['pc', 'mobile-first'], pcDemo: 'basic-usage', mfDemo: '' + }, + { + name: 'round', + type: 'boolean', + defaultValue: 'false', + desc: { + 'zh-CN': '是否为圆角的模式', + 'en-US': 'Whether it is a circular mode' + }, + mode: ['pc'], + pcDemo: 'round', + mfDemo: '', + meta: { + stable: '3.28.0' + } } ], events: [ diff --git a/examples/sites/demos/pc/app/tag/round-composition-api.vue b/examples/sites/demos/pc/app/tag/round-composition-api.vue new file mode 100644 index 0000000000..6c82e569fd --- /dev/null +++ b/examples/sites/demos/pc/app/tag/round-composition-api.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/examples/sites/demos/pc/app/tag/round.spec.ts b/examples/sites/demos/pc/app/tag/round.spec.ts new file mode 100644 index 0000000000..65f83fa99d --- /dev/null +++ b/examples/sites/demos/pc/app/tag/round.spec.ts @@ -0,0 +1,12 @@ +import { test, expect } from '@playwright/test' + +test('圆角', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('tag#round') + + const tags = page.locator('.all-demos-container').locator('.tiny-tag') + const count = await tags.count() + + // 动态创建与元素数量相同的期望数组 + await expect(tags).toHaveClass(Array(count).fill(/tiny-tag--round/)) +}) diff --git a/examples/sites/demos/pc/app/tag/round.vue b/examples/sites/demos/pc/app/tag/round.vue new file mode 100644 index 0000000000..50ba4220f7 --- /dev/null +++ b/examples/sites/demos/pc/app/tag/round.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/examples/sites/demos/pc/app/tag/webdoc/tag.js b/examples/sites/demos/pc/app/tag/webdoc/tag.js index f268875fd5..0091ccc755 100644 --- a/examples/sites/demos/pc/app/tag/webdoc/tag.js +++ b/examples/sites/demos/pc/app/tag/webdoc/tag.js @@ -114,6 +114,30 @@ export default { }, codeFiles: ['delete.vue'] }, + { + demoId: 'round', + name: { + 'zh-CN': '圆角', + 'en-US': 'Round' + }, + desc: { + 'zh-CN': '通过 round 设置圆角。', + 'en-US': 'Set the round through round .' + }, + codeFiles: ['round.vue'], + api: { + props: { + round: { + type: 'boolean', + defaultValue: 'false', + desc: { + 'zh-CN': '是否为圆角的模式', + 'en-US': 'Whether it is a round mode' + } + } + } + } + }, { demoId: 'slot-default', name: { diff --git a/packages/vue/src/tag/src/index.ts b/packages/vue/src/tag/src/index.ts index 4c55ac2ded..35bab2330e 100644 --- a/packages/vue/src/tag/src/index.ts +++ b/packages/vue/src/tag/src/index.ts @@ -43,6 +43,10 @@ export const tagProps = { type: [String, Number], default: null }, + round: { + type: Boolean, + default: false + }, // mobile mini: { type: Boolean, diff --git a/packages/vue/src/tag/src/pc.vue b/packages/vue/src/tag/src/pc.vue index 9db3a687fe..f8224be773 100644 --- a/packages/vue/src/tag/src/pc.vue +++ b/packages/vue/src/tag/src/pc.vue @@ -33,7 +33,8 @@ export default defineComponent({ 'value', 'beforeDelete', 'onlyIcon', - 'maxWidth' + 'maxWidth', + 'round' ], setup(props, context) { return setup({ props, context, renderless, api, h }) as unknown as ITagApi @@ -53,7 +54,8 @@ export default defineComponent({ state, value, onlyIcon, - maxWidth + maxWidth, + round } = this let styles = {} @@ -65,7 +67,8 @@ export default defineComponent({ effect ? `tiny-tag--${effect}` : '', hit && 'is-hit', disabled ? 'is-disabled' : '', - onlyIcon ? 'tiny-tag--only-icon' : '' + onlyIcon ? 'tiny-tag--only-icon' : '', + round ? 'tiny-tag--round' : '' ] if (color) { @@ -82,6 +85,10 @@ export default defineComponent({ styles.maxWidth = maxWidth } + if (round) { + styles.borderRadius = '9999px' + } + const tagElement = value || (slots.default && slots.default()) ? (