From 0a9de1e94ed8ba03f733300ece943084834bb2e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Tue, 31 Jul 2018 20:36:03 +0800 Subject: [PATCH] [breaking change] Tag: rewrite --- example/pages/tag/index.js | 12 +--- example/pages/tag/index.json | 3 +- example/pages/tag/index.wxml | 42 ++++++-------- example/pages/tag/index.wxss | 8 --- packages/tag/README.md | 59 ++++++++++++-------- packages/tag/index.js | 16 ++---- packages/tag/index.pcss | 105 +++++++++++++---------------------- packages/tag/index.wxml | 9 ++- 8 files changed, 101 insertions(+), 153 deletions(-) diff --git a/example/pages/tag/index.js b/example/pages/tag/index.js index 454020c0..560d44d4 100644 --- a/example/pages/tag/index.js +++ b/example/pages/tag/index.js @@ -1,11 +1 @@ -Page({ - data: { - }, - - onLoad: function () { - - }, - - onShow: function() { - }, -}) +Page({}); diff --git a/example/pages/tag/index.json b/example/pages/tag/index.json index 6e6dae7d..f627a498 100644 --- a/example/pages/tag/index.json +++ b/example/pages/tag/index.json @@ -1,8 +1,7 @@ { "navigationBarTitleText": "Tag 标记", "usingComponents": { - "van-cell": "../../dist/cell/index", - "van-panel": "../../dist/panel/index", + "demo-block": "../../components/demo-block/index", "van-tag": "../../dist/tag/index" } } diff --git a/example/pages/tag/index.wxml b/example/pages/tag/index.wxml index 2f7d6425..a02a59a5 100644 --- a/example/pages/tag/index.wxml +++ b/example/pages/tag/index.wxml @@ -1,26 +1,20 @@ - - - 灰色 - 红色 - 不可用 - - + + 标签 + 标签 + 标签 + 标签 + - - - 会员折扣 - 返现 - 返现 - 不可用 - - + + 标签 + 标签 + 标签 + 标签 + - - - 灰色 - 会员折扣 - 返现 - 返现 - 返现不可用 - - + + 标签 + 标签 + 标签 + 标签 + diff --git a/example/pages/tag/index.wxss b/example/pages/tag/index.wxss index 72329fdb..e69de29b 100644 --- a/example/pages/tag/index.wxss +++ b/example/pages/tag/index.wxss @@ -1,8 +0,0 @@ -.tag-demo { - display: block; - margin: 15px 0; -} - -van-tag + van-tag { - margin-left: 10px; -} diff --git a/packages/tag/README.md b/packages/tag/README.md index a28109fd..7f5c0c7d 100644 --- a/packages/tag/README.md +++ b/packages/tag/README.md @@ -1,7 +1,8 @@ ## Tag 标签 ### 使用指南 -在 json 文件中配置tag组件 + +在 index.json 中引入组件 ```json "usingComponents": { "van-tag": "path/to/vant-weapp/dist/tag/index" @@ -11,41 +12,51 @@ ### 代码演示 #### 基础用法 +通过 type 属性控制 Tag 颜色，默认为灰色 + ```html -取消订单 +标签 +标签 +标签 +标签 ``` -#### 类型 -tag支持额外的三种类型 primary, danger, warn +#### 空心样式 +设置`plain`属性设置为空心样式 + ```html -会员折扣 -返现 -返现 +标签 +标签 +标签 +标签 ``` +#### 圆角样式 +通过`mark`设置为圆角样式 -#### 其他 -tag镂空状态 ```html -返现 +标签 +标签 +标签 +标签 ``` -tag禁用状态 -```html -不可用 -``` - - ### API -| 名称 | 类型 | 是否必须 | 默认 | 描述 | -|---------|---------|----------|------|-------| -| type | String | 否 | 空 | tag类型，值有primary、warn、danger | -| plain | Boolean | 否 | false | tag是否镂空，默认为false | -| disabled | Boolean | 否 | false | tag是否禁用，默认为false | +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| type | 类型，可选值为`primary` `success` `danger` | `String` | `''`| +| plain | 是否为空心样式 | `Boolean` | `false` | +| mark | 是否为圆角样式 | `Boolean` | `false` | + +### Slot + +| 名称 | 说明 | +|-----------|-----------| +| default | 自定义 Tag 显示内容 | ### 外部样式类 -| 类名 | 说明 | + +| 类名 | 说明 | |-----------|-----------| -| custom-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 | -| theme-class | 根节点自定义样式类，用于更改根节点上的主题样式 | +| custom-class | 根节点样式类 | diff --git a/packages/tag/index.js b/packages/tag/index.js index 8f936e68..7a9299d1 100644 --- a/packages/tag/index.js +++ b/packages/tag/index.js @@ -1,17 +1,9 @@ Component({ - externalClasses: ['custom-class', 'theme-class'], + externalClasses: ['custom-class'], properties: { - type: { - type: String, - }, - plain: { - type: Boolean, - value: false, - }, - disabled: { - type: Boolean, - value: false, - } + type: String, + mark: Boolean, + plain: Boolean } }); diff --git a/packages/tag/index.pcss b/packages/tag/index.pcss index c84e0bfa..cc8b00db 100644 --- a/packages/tag/index.pcss +++ b/packages/tag/index.pcss @@ -1,83 +1,54 @@ -@import '../common/_var'; -@import "../common/_mixins"; +@import '../helper/index.pcss'; .van-tag { display: inline-block; - position: relative; - box-sizing: border-box; - line-height: 16px; - padding: 0 5px; - border-radius: 2px; - font-size: 11px; + padding: 2px 5px; + line-height: normal; + border-radius: 3px; + font-size: 10px; background: $gray; - text-align: center; color: $white; &::after { - @mixin hairline; - border-width: 1px; + border-color: currentColor; border-radius: 4px; } -} -.van-tag--plain { - color: $gray; - background: $white; -} + &--mark { + padding-right: 7px; + border-radius: 0 8px 8px 0; -/* 各种主题代码 */ -.van-tag--primary { - color: $button-primary-color; - background-color: $button-primary-background-color; - - &::after { - border-color: $button-primary-background-color; + &::after { + border-radius: 0 16px 16px 0; + } } - /* 空心形式 */ - &.van-tag--plain { - color: $button-primary-background-color; + &--success { + background: $green; + + &.van-tag--plain { + color: $green; + } + } + + &--danger { + background: $button-danger-background-color; + + &.van-tag--plain { + color: $button-danger-background-color; + } + } + + &--primary { + background: $blue; + + &.van-tag--plain { + color: $blue; + } + } + + &--plain { background: $white; - } -} - -.van-tag--danger { - color: $button-danger-color; - background: $button-danger-background-color; - - &::after { - border-color: $button-danger-background-color; - } - - /* 空心形式 */ - &.van-tag--plain { - color: $button-danger-background-color; - background: $button-danger-color; - } -} - -.van-tag--warn { - color: $white; - background: #f85; - - &::after { - border-color: #f85; - } - - /* 空心形式 */ - &.van-tag--plain { - color: #f85; - background: $white; - } -} - - -/* disabled tag */ -.van-tag--disabled { - color: $button-disabled-color !important; - background: $button-disabled-background-color; - - &::after { - border-color: $button-disabled-border-color; + color: $gray; } } diff --git a/packages/tag/index.wxml b/packages/tag/index.wxml index a585a66f..b22107b8 100644 --- a/packages/tag/index.wxml +++ b/packages/tag/index.wxml @@ -1,6 +1,5 @@ - - - - \ No newline at end of file + +