diff --git a/examples/sites/demos/mobile/app/tag/basic-usage.vue b/examples/sites/demos/mobile/app/tag/basic-usage.vue
new file mode 100644
index 000000000..a07ed4111
--- /dev/null
+++ b/examples/sites/demos/mobile/app/tag/basic-usage.vue
@@ -0,0 +1,27 @@
+
+
+
+ 默认默认默认默认默认默认默认默认
+
+
+
+
+
+
diff --git a/examples/sites/demos/mobile/app/tag/different-color.vue b/examples/sites/demos/mobile/app/tag/different-color.vue
new file mode 100644
index 000000000..fdc080229
--- /dev/null
+++ b/examples/sites/demos/mobile/app/tag/different-color.vue
@@ -0,0 +1,30 @@
+
+
+ 默认
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/mobile/app/tag/max-width.vue b/examples/sites/demos/mobile/app/tag/max-width.vue
new file mode 100644
index 000000000..5906ebdba
--- /dev/null
+++ b/examples/sites/demos/mobile/app/tag/max-width.vue
@@ -0,0 +1,26 @@
+
+
+ 默认默认默认默认默认默认默认默认
+
+
+
+
+
+
diff --git a/examples/sites/demos/mobile/app/tag/mini.vue b/examples/sites/demos/mobile/app/tag/mini.vue
new file mode 100644
index 000000000..f03d2e2cd
--- /dev/null
+++ b/examples/sites/demos/mobile/app/tag/mini.vue
@@ -0,0 +1,27 @@
+
+
+ 默认
+ 小尺寸
+
+
+
+
+
+
diff --git a/examples/sites/demos/mobile/app/tag/webdoc/tag.cn.md b/examples/sites/demos/mobile/app/tag/webdoc/tag.cn.md
new file mode 100644
index 000000000..5516915cc
--- /dev/null
+++ b/examples/sites/demos/mobile/app/tag/webdoc/tag.cn.md
@@ -0,0 +1,7 @@
+---
+title: Tag 标签
+---
+
+# Tag 标签
+
+
用于标记事物的属性和维度
diff --git a/examples/sites/demos/mobile/app/tag/webdoc/tag.en.md b/examples/sites/demos/mobile/app/tag/webdoc/tag.en.md
new file mode 100644
index 000000000..c9c66370b
--- /dev/null
+++ b/examples/sites/demos/mobile/app/tag/webdoc/tag.en.md
@@ -0,0 +1,7 @@
+---
+title: Tag
+---
+
+# Tag
+
+Used to mark transaction attributes and dimensions
diff --git a/examples/sites/demos/mobile/app/tag/webdoc/tag.js b/examples/sites/demos/mobile/app/tag/webdoc/tag.js
new file mode 100644
index 000000000..ca75de3d4
--- /dev/null
+++ b/examples/sites/demos/mobile/app/tag/webdoc/tag.js
@@ -0,0 +1,96 @@
+export default {
+ column: '2',
+ owner: '',
+ demos: [
+ {
+ 'demoId': 'basic-usage',
+ 'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+ 'desc': {
+ 'zh-CN': '基本用法',
+ 'en-US': 'Basic Usage'
+ },
+ 'codeFiles': ['basic-usage.vue']
+ },
+ {
+ 'demoId': 'different-color',
+ 'name': { 'zh-CN': '不同颜色', 'en-US': 'Different Color' },
+ 'desc': {
+ 'zh-CN': '不同颜色',
+ 'en-US': 'Different Color'
+ },
+ 'codeFiles': ['different-color.vue']
+ },
+ {
+ 'demoId': 'max-width',
+ 'name': { 'zh-CN': '最大宽度', 'en-US': 'Max Width' },
+ 'desc': {
+ 'zh-CN': '最大宽度',
+ 'en-US': 'Max Width'
+ },
+ 'codeFiles': ['max-width.vue']
+ },
+ {
+ 'demoId': 'mini',
+ 'name': { 'zh-CN': '小尺寸', 'en-US': 'Mini' },
+ 'desc': {
+ 'zh-CN': '小尺寸',
+ 'en-US': 'Mini'
+ },
+ 'codeFiles': ['mini.vue']
+ }
+ ],
+ apis: [
+ {
+ 'name': 'tag',
+ 'type': 'component',
+ 'props': [
+ {
+ 'name': 'color',
+ 'type': 'string',
+ 'defaultValue': 'default',
+ 'desc': {
+ 'zh-CN': '文字颜色:default、red、blue、yellow、green',
+ 'en-US': 'text color: default、red、blue、yellow、green'
+ },
+ 'demoId': 'different-color'
+ },
+ {
+ 'name': 'max-width',
+ 'type': 'string | number',
+ 'defaultValue': '',
+ 'desc': { 'zh-CN': '最大宽度', 'en-US': 'max width' },
+ 'demoId': 'max-width'
+ },
+ {
+ 'name': 'mini',
+ 'type': 'boolean',
+ 'defaultValue': 'false',
+ 'desc': {
+ 'zh-CN': '小尺寸',
+ 'en-US': 'mini'
+ },
+ 'demoId': 'mini'
+ },
+ {
+ 'name': 'text',
+ 'type': 'string',
+ 'defaultValue': '',
+ 'desc': {
+ 'zh-CN': '文字',
+ 'en-US': 'Text'
+ },
+ 'demoId': 'basic-usage'
+ }
+ ],
+ 'slots': [
+ {
+ 'name': 'default',
+ 'type': '',
+ 'defaultValue': '',
+ 'desc': { 'zh-CN': '标签内容', 'en-US': 'Label Content' },
+ 'demoId': 'slot-default'
+ }
+ ]
+ }
+ ]
+}
diff --git a/examples/sites/demos/mobile/menus.js b/examples/sites/demos/mobile/menus.js
index 6957af093..873a08471 100644
--- a/examples/sites/demos/mobile/menus.js
+++ b/examples/sites/demos/mobile/menus.js
@@ -113,7 +113,8 @@ export const cmpMenus = [
{ name: 'Icon', nameCn: '图标', key: 'icon' },
{ name: 'ActionSheet', nameCn: '上滑列表组件', key: 'actionsheet' },
{ name: 'MiniPicker', nameCn: 'mini选择器', key: 'minipicker' },
- { name: 'UserHead', nameCn: '用户头像', key: 'user-head' }
+ { name: 'UserHead', nameCn: '用户头像', key: 'user-head' },
+ { name: 'Tag', nameCn: '标签', key: 'tag' }
]
}
]
diff --git a/packages/modules.json b/packages/modules.json
index ffeaf73d9..3e18f4db2 100644
--- a/packages/modules.json
+++ b/packages/modules.json
@@ -2434,6 +2434,7 @@
"exclude": false,
"mode": [
"mobile-first",
+ "mobile",
"pc"
]
},
@@ -2456,6 +2457,11 @@
"type": "template",
"exclude": false
},
+ "TagMobile": {
+ "path": "vue/src/tag/src/mobile.vue",
+ "type": "template",
+ "exclude": false
+ },
"TagMobileFirst": {
"path": "vue/src/tag/src/mobile-first.vue",
"type": "template",
diff --git a/packages/renderless/src/tag/vue.ts b/packages/renderless/src/tag/vue.ts
index 15089c394..d2627110f 100644
--- a/packages/renderless/src/tag/vue.ts
+++ b/packages/renderless/src/tag/vue.ts
@@ -22,7 +22,11 @@ export const renderless = (
const state: ITagState = reactive({
type: computed(() => props.theme || props.type),
show: true,
- selected: false
+ selected: false,
+ mini: props.mini,
+ color: props.color,
+ text: props.text,
+ maxWidth: props.maxWidth
})
const api: ITagApi = {
diff --git a/packages/renderless/types/tag.type.ts b/packages/renderless/types/tag.type.ts
index d8151f64b..08d70582b 100644
--- a/packages/renderless/types/tag.type.ts
+++ b/packages/renderless/types/tag.type.ts
@@ -6,6 +6,10 @@ export interface ITagState {
type: string | undefined
show: boolean
selected: boolean
+ text: string
+ color: string
+ mini: boolean
+ maxWidth: string | number
}
export interface ITagApi {
diff --git a/packages/theme-mobile/src/tag/index.less b/packages/theme-mobile/src/tag/index.less
new file mode 100644
index 000000000..94246e348
--- /dev/null
+++ b/packages/theme-mobile/src/tag/index.less
@@ -0,0 +1,59 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@tag-prefix-cls: ~'@{css-prefix}mobile-tag';
+
+.@{tag-prefix-cls} {
+ .component-css-vars-tag();
+
+ line-height: var(--ti-mobile-tag-height-default);
+ padding: 0 var(--ti-mobile-tag-padding-default);
+ text-align: center;
+ font-size: var(--ti-mobile-tag-font-size-default);
+ color: var(--ti-mobile-tag-color-default);
+ background-color: var(--ti-mobile-tag-bg-color-default);
+ display: inline-block;
+ border-radius: var(--ti-mobile-tag-border-radius-default);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &-mini {
+ line-height: var(--ti-mobile-tag-height-mini);
+ padding: 0 var(--ti-mobile-tag-padding-mini);
+ font-size: var(--ti-mobile-tag-font-size-mini);
+ border-radius: var(--ti-mobile-tag-border-radius-mini);
+ }
+
+ &-red {
+ color: var(--ti-mobile-tag-color-red);
+ background-color: var(--ti-mobile-tag-bg-color-red);
+ }
+
+ &-blue {
+ color: var(--ti-mobile-tag-color-blue);
+ background-color: var(--ti-mobile-tag-bg-color-blue);
+ }
+
+ &-yellow {
+ color: var(--ti-mobile-tag-color-yellow);
+ background-color: var(--ti-mobile-tag-bg-color-yellow);
+ }
+
+ &-green {
+ color: var(--ti-mobile-tag-color-green);
+ background-color: var(--ti-mobile-tag-bg-color-green);
+ }
+}
diff --git a/packages/theme-mobile/src/tag/vars.less b/packages/theme-mobile/src/tag/vars.less
new file mode 100644
index 000000000..d7d5580d9
--- /dev/null
+++ b/packages/theme-mobile/src/tag/vars.less
@@ -0,0 +1,50 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-tag() {
+ // 默认文字色值
+ --ti-mobile-tag-color-default: var(--ti-mobile-color-text-primary, #191919);
+ // 红色文字色值
+ --ti-mobile-tag-color-red: var(--ti-mobile-color-eror, #f23030);
+ // 蓝色文字色值
+ --ti-mobile-tag-color-blue: var(--ti-mobile-color-info, #1476ff);
+ // 黄色文字色值
+ --ti-mobile-tag-color-yellow: var(--ti-mobile-color-warning, #d96900);
+ // 绿色文字色值
+ --ti-mobile-tag-color-green: var(--ti-mobile-color-success, #029931);
+ // 默认背景色
+ --ti-mobile-tag-bg-color-default: var(--ti-mobile-color-bg-disabled, #f0f0f0);
+ // 红色背景色
+ --ti-mobile-tag-bg-color-red: var(--ti-mobile-color-error-subtler, #fce3e1);
+ // 蓝色背景色
+ --ti-mobile-tag-bg-color-blue: var(--ti-mobile-color-info-subtle, #deecff);
+ // 黄色背景色
+ --ti-mobile-tag-bg-color-yellow: var(--ti-mobile-color-warning-subtle, #ffebd1);
+ // 绿色背景色
+ --ti-mobile-tag-bg-color-green: var(--ti-mobile-color-success-subtle, #e6f2d5);
+ // 默认高度
+ --ti-mobile-tag-height-default: var(--ti-mobile-space-6x, 24px);
+ // 小尺寸高度
+ --ti-mobile-tag-height-mini: calc(var(--ti-mobile-space-4x) + 2px);
+ // 默认字体尺寸
+ --ti-mobile-tag-font-size-default: var(--ti-mobile-font-size-m, 14px);
+ // 小尺寸字体尺寸
+ --ti-mobile-tag-font-size-mini: var(--ti-mobile-font-size-s, 12px);
+ // 默认间距
+ --ti-mobile-tag-padding-default: var(--ti-mobile-space-2x, 8px);
+ // 小尺寸间距
+ --ti-mobile-tag-padding-mini: var(--ti-mobile-space-1x, 4px);
+ // 默认圆角尺寸
+ --ti-mobile-tag-border-radius-default: var(--ti-mobile-border-radius-s, 4px);
+ // 小尺寸圆角尺寸
+ --ti-mobile-tag-border-radius-mini: var(--ti-mobile-border-radius-xs, 2px);
+}
diff --git a/packages/vue/src/tag/src/index.ts b/packages/vue/src/tag/src/index.ts
index 4ce31e298..89169679c 100644
--- a/packages/vue/src/tag/src/index.ts
+++ b/packages/vue/src/tag/src/index.ts
@@ -10,7 +10,7 @@
*
*/
import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
-import template from 'virtual-template?pc|mobile-first'
+import template from 'virtual-template?pc|mobile|mobile-first'
export const tagProps = {
...$props,
@@ -34,7 +34,17 @@ export const tagProps = {
validator: (value: string) => Boolean(~['dark', 'light', 'plain'].indexOf(value))
},
beforeDelete: Function,
- value: [Number, String]
+ value: [Number, String],
+
+ // mobile
+ mini: {
+ type: Boolean,
+ default: false
+ },
+ maxWidth: {
+ type: [String, Number],
+ default: null
+ }
}
export default defineComponent({
diff --git a/packages/vue/src/tag/src/mobile.vue b/packages/vue/src/tag/src/mobile.vue
new file mode 100644
index 000000000..937459cea
--- /dev/null
+++ b/packages/vue/src/tag/src/mobile.vue
@@ -0,0 +1,35 @@
+
+
+
+
+ {{ state.text }}
+
+
+
+