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()) ? (