diff --git a/src/tag/README.md b/src/tag/README.md index 7a6e00b21..2fc980e45 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -20,69 +20,28 @@ Vue.use(Tag); Tag ``` +### Plain style + +```html +Tag +``` + ### Round style ```html Tag -Tag -Tag -Tag ``` ### Mark style ```html Tag -Tag -Tag -Tag -``` - -### Plain style - -```html -Tag -Tag -Tag -Tag -``` - -### Custom Color - -```html -Tag -Tag -Tag -Tag -``` - -### Custom Size - -```html -Tag -Tag -Tag ``` ### Closeable ```html - - Tag - - + Tag ``` @@ -91,20 +50,33 @@ Vue.use(Tag); export default { data() { return { - show: { - primary: true, - success: true, - }, + show: true, }; }, methods: { - close(type) { - this.show[type] = false; + close() { + this.show = false; }, }, }; ``` +### Custom Size + +```html +Tag +Tag +Tag +``` + +### Custom Color + +```html +Tag +Tag +Tag +``` + ## API ### Props diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md index b855db5e5..5319f12ed 100644 --- a/src/tag/README.zh-CN.md +++ b/src/tag/README.zh-CN.md @@ -22,15 +22,20 @@ Vue.use(Tag); 标签 ``` +### 空心样式 + +设置 `plain` 属性设置为空心样式。 + +```html +标签 +``` + ### 圆角样式 通过 `round` 设置为圆角样式。 ```html 标签 -标签 -标签 -标签 ``` ### 标记样式 @@ -39,37 +44,6 @@ Vue.use(Tag); ```html 标签 -标签 -标签 -标签 -``` - -### 空心样式 - -设置 `plain` 属性设置为空心样式。 - -```html -标签 -标签 -标签 -标签 -``` - -### 自定义颜色 - -```html -标签 -标签 -标签 -标签 -``` - -### 标签大小 - -```html -标签 -标签 -标签 ``` ### 可关闭标签 @@ -77,22 +51,7 @@ Vue.use(Tag); 添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。 ```html - - 标签 - - + 标签 ``` @@ -101,20 +60,37 @@ Vue.use(Tag); export default { data() { return { - show: { - primary: true, - success: true, - }, + show: true, }; }, methods: { - close(type) { - this.show[type] = false; + close() { + this.show = false; }, }, }; ``` +### 标签大小 + +通过 `size` 属性调整标签大小。 + +```html +标签 +标签 +标签 +``` + +### 自定义颜色 + +通过 `color` 和 `text-color` 属性设置标签颜色。 + +```html +标签 +标签 +标签 +``` + ## API ### Props diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue index 800b21681..71fa7386f 100644 --- a/src/tag/demo/index.vue +++ b/src/tag/demo/index.vue @@ -1,65 +1,65 @@ @@ -68,35 +68,47 @@ export default { i18n: { 'zh-CN': { + type: '类型', + mark: '标记样式', plain: '空心样式', round: '圆角样式', - mark: '标记样式', + tagStyle: '样式风格', closeable: '可关闭标签', - customColor: '自定义颜色', + smallSize: '小号标签', + largeSize: '大号标签', + mediumSize: '中号标签', customSize: '标签大小', + customColor: '自定义颜色', + customBgColor: '背景颜色', + customTextColor: '文字颜色', + customPlainColor: '空心颜色', }, 'en-US': { + mark: 'Mark style', plain: 'Plain style', round: 'Round style', - mark: 'Mark style', + tagStyle: 'Tag Style', closeable: 'Closeable', + smallSize: 'Small Size', + largeSize: 'Large Size', + mediumSize: 'Medium Size', customColor: 'Custom Color', customSize: 'Custom Size', + customBgColor: 'Background Color', + customTextColor: 'Text Color', + customPlainColor: 'Plain Color', }, }, data() { return { - show: { - primary: true, - success: true, - }, + show: true, }; }, methods: { - close(tag) { - this.show[tag] = false; + close() { + this.show = false; }, }, }; @@ -106,14 +118,6 @@ export default { @import '../../style/var'; .demo-tag { - background-color: @white; - - .van-tag { - &:first-of-type { - margin-left: @padding-md; - } - } - .van-tag + .van-tag { margin-left: @padding-xs; } diff --git a/src/tag/test/__snapshots__/demo.spec.js.snap b/src/tag/test/__snapshots__/demo.spec.js.snap index ddcd773be..5a3bfb560 100644 --- a/src/tag/test/__snapshots__/demo.spec.js.snap +++ b/src/tag/test/__snapshots__/demo.spec.js.snap @@ -2,16 +2,71 @@ exports[`renders demo correctly 1`] = `
-
标签 标签 标签 标签
-
标签 标签 标签 标签
-
标签 标签 标签 标签
-
标签 标签 标签 标签
-
标签 标签 标签 标签
-
标签 标签 标签
-
- 标签 - - 标签 -
+
+
+
primary 类型
+
标签
+
+
+
success 类型
+
标签
+
+
+
danger 类型
+
标签
+
+
+
warning 类型
+
标签
+
+
+
+
+
空心样式
+
标签
+
+
+
圆角样式
+
标签
+
+
+
标记样式
+
标签
+
+
+
可关闭标签
+
+ 标签 +
+
+
+
+
+
小号标签
+
标签
+
+
+
中号标签
+
标签
+
+
+
大号标签
+
标签
+
+
+
+
+
背景颜色
+
标签
+
+
+
文字颜色
+
标签
+
+
+
空心颜色
+
标签
+
+
`;