diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md index 91761fff0..a5bfd47d2 100644 --- a/docs/examples-docs/button.md +++ b/docs/examples-docs/button.md @@ -114,8 +114,8 @@ Vue.component(Button.name, Button); | type | 按钮类型 | `String` | `default` | `primary` `danger` | | size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` | | tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 | -| nativeType | 按钮类型（原生） | `String` | `''` | | -| diabled | 是否禁用 | `Boolean` | `false` | | -| loading | 是否显示为加载状态 | `Boolean` | `false` | | -| block | 是否为块级元素 | `Boolean` | `false` | | -| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | | +| nativeType | 按钮类型（原生） | `String` | `''` | - | +| diabled | 是否禁用 | `Boolean` | `false` | - | +| loading | 是否显示为加载状态 | `Boolean` | `false` | - | +| block | 是否为块级元素 | `Boolean` | `false` | - | +| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - | diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md index 993c39f6d..2c586a78a 100644 --- a/docs/examples-docs/card.md +++ b/docs/examples-docs/card.md @@ -1,3 +1,13 @@ + + ## Card 图文组件 ### 使用指南 @@ -11,15 +21,9 @@ Vue.component(Card.name, Card); #### 基础用法 -当没有底部按钮时，右侧内容会居中显示。 - :::demo 基础用法 ```html - - + ``` ::: @@ -29,10 +33,9 @@ Vue.component(Card.name, Card); :::demo 高级用法 ```html - +
-

商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余

+

商品名称

¥ 2.00
@@ -50,11 +53,10 @@ Vue.component(Card.name, Card); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| thumb | 左侧图片 | `string` | | | -| title | 标题 | `string` | | | -| desc | 描述 | `string` | | | -| centered | 内容是否垂直居中 | `string` | `false` | | - +| thumb | 左侧图片 | `String` | - | - | +| title | 标题 | `String` | - | - | +| desc | 描述 | `String` | - | - | +| centered | 内容是否垂直居中 | `String` | `false` | - | ### Slot @@ -62,6 +64,6 @@ Vue.component(Card.name, Card); |-----------|-----------| | title | 自定义标题 | | desc | 自定义描述 | -| tags | 自定义tags | -| thumb | 自定义thumb | -| footer | 自定义footer | +| tags | 自定义 tags | +| thumb | 自定义 thumb | +| footer | 自定义 footer | diff --git a/docs/examples-docs/cell-swipe.md b/docs/examples-docs/cell-swipe.md index 45225aabd..a16494da7 100644 --- a/docs/examples-docs/cell-swipe.md +++ b/docs/examples-docs/cell-swipe.md @@ -1,6 +1,6 @@ ## CellSwipe 滑动单元格 @@ -36,22 +32,21 @@ Vue.component(CellSwipe.name, CellSwipe); :::demo 基础用法 ```html + 选择 - 删除 - 选择 + 删除 ``` ::: - ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| left-width | 左侧滑动按钮宽度 | `number` | 0 | | -| right-width | 右侧滑动按钮宽度 | `number` | 0 | | +| left-width | 左侧滑动区域宽度 | `Number` | `0` | - | +| right-width | 右侧滑动区域宽度 | `Number` | `0` | - | ### Slot diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md index b2566b15a..bbad3c505 100644 --- a/docs/examples-docs/cell.md +++ b/docs/examples-docs/cell.md @@ -8,6 +8,21 @@ export default { }; + + ## Cell 单元格 ### 使用指南 @@ -22,86 +37,66 @@ Vue.component(CellGroup.name, CellGroup); #### 基础用法 -你可以将`van-cell-group`组件看成一个容器即可。 +将`van-cell-group`组件看成一个容器即可 :::demo 基础用法 ```html - + ``` ::: #### 只设置value - -只设置`value`时会向左对齐。 +只设置`value`时会向左对齐 :::demo 只设置value ```html - - + ``` ::: -#### 标题带描述信息 - -传入`label`属性，属性值为描述信息的值。 - -:::demo 标题带描述信息 +#### 展示图标 +通过`icon`属性在标题左侧展示图标 +:::demo 展示图标 ```html - - + ``` ::: -#### 带图标 +#### 展示箭头 +传入`isLink`属性则会在右侧显示箭头 -传入`icon`属性。 - -:::demo 带图标 +:::demo 展示箭头 ```html - - - -``` -::: - -#### 可点击的链接 - -传入`url`属性，传入`isLink`属性则会在右侧显示箭头。 - -:::demo 可点击的链接 -```html - - - + + ``` ::: #### 高级用法 - -如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`、`icon`、`title`和`right-icon`的`slot`。 +如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容 :::demo 高级用法 ```html - + - + @@ -112,12 +107,13 @@ Vue.component(CellGroup.name, CellGroup); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| icon | 左侧图标 | `string` | | | -| title | 左侧标题 | `string` | | | -| value | 右侧内容 | `string` | | | -| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean` | | | -| url | 跳转链接 | `string` | | | -| label | 描述信息，显示在标题下方 | `string` | | | +| icon | 左侧图标 | `String` | - | - | +| title | 左侧标题 | `String` | - | - | +| value | 右侧内容 | `String` | - | - | +| label | 标题下方的描述信息 | `String` | - | - | +| url | 跳转链接 | `String` | - | - | +| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - | +| required | 是否显示表单必填符号 | `Boolean` | `false` | - | ### Slot diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md index a2278a668..a6c572e82 100644 --- a/docs/examples-docs/icon.md +++ b/docs/examples-docs/icon.md @@ -8,13 +8,14 @@ .van-col { text-align: center; - height: 120px; + height: 100px; float: none; display: inline-block; + color: rgba(69, 90, 100, .8); } .van-icon { - font-size: 45px; + font-size: 32px; margin: 15px 0; display: block; } @@ -29,15 +30,99 @@ import Vue from 'vue'; import { Icon } from 'packages'; +const icons = [ + 'close', + 'location', + 'clock', + 'gold-coin', + 'chat', + 'exchange', + 'upgrade', + 'edit', + 'contact', + 'passed', + 'points', + 'delete', + 'records', + 'logistics', + 'check', + 'checked', + 'gift', + 'like-o', + 'like', + 'qr', + 'qr-invalid', + 'shop', + 'photograph', + 'add', + 'add2', + 'photo', + 'cart', + 'arrow', + 'search', + 'clear', + 'success', + 'fail', + 'wechat', + 'alipay', + 'password-view', + 'wap-nav', + 'password-not-view', + 'wap-home', + 'ecard-pay', + 'balance-pay', + 'peer-pay', + 'credit-pay', + 'debit-pay', + 'other-pay', + 'cart', + 'browsing-history', + 'goods-collect', + 'shop-collect', + 'receive-gift', + 'send-gift', + 'setting', + 'coupon', + 'free-postage', + 'discount', + 'birthday-privilege', + 'member-day-privilege', + 'balance-details', + 'cash-back-record', + 'points-mall', + 'exchange-record', + 'pending-payment', + 'pending-orders', + 'pending-deliver', + 'pending-evaluate', + 'cash-on-deliver', + 'gift-card-pay', + 'underway', + 'point-gift', + 'after-sale', + 'edit-data', + 'question', + 'description', + 'card', + 'gift-card', + 'coupon' +]; + Vue.component('van-icon-inner', Icon); Vue.component('van-icon', { props: ['name'], render(h) { - return - - {this.name} - + return ( +
+ {icons.map(icon => ( + + + {icon} + + ))} +
+ ) } }); @@ -57,7 +142,7 @@ Vue.component(Icon.name, Icon); #### 基础用法 -设置`name`属性为对应的图标名称即可： +设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表 :::demo 基础用法 ```html @@ -65,90 +150,8 @@ Vue.component(Icon.name, Icon); ``` ::: -#### 图标列表 - -:::demo 所有Icon -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` -::: - ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| name | icon名称 | `string` | `''` | | +| name | icon名称 | `String` | `''` | - | diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md index 1239abd78..0de221cb1 100644 --- a/docs/examples-docs/image-preview.md +++ b/docs/examples-docs/image-preview.md @@ -11,7 +11,7 @@ import { ImagePreview } from 'packages/index'; export default { methods: { - handleImagePreview() { + showImagePreview() { ImagePreview([ 'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png', 'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg', @@ -38,22 +38,20 @@ import { ImagePreview } from 'vant'; :::demo 基础用法 ```html -预览图片 - - ``` ::: diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md index 67d32b869..2fe09d2a9 100644 --- a/docs/examples-docs/layout.md +++ b/docs/examples-docs/layout.md @@ -79,12 +79,12 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置 #### Row | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | | -| prefix | className 前缀 | `String` | `van` | | +| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - | +| prefix | className 前缀 | `String` | `van` | - | #### Column | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| span | 列元素宽度 | `String | Number` | - | | -| offset | 列元素偏移距离 | `String | Number` | - | | -| prefix | className 前缀 | `String` | `van` | | +| span | 列元素宽度 | `String | Number` | - | - | +| offset | 列元素偏移距离 | `String | Number` | - | - | +| prefix | className 前缀 | `String` | `van` | - | diff --git a/docs/examples-docs/notice-bar.md b/docs/examples-docs/notice-bar.md index eaccdde97..7da1faa12 100644 --- a/docs/examples-docs/notice-bar.md +++ b/docs/examples-docs/notice-bar.md @@ -58,9 +58,9 @@ Vue.component(NoticeBar.name, NoticeBar); | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | mode | 通告栏模式 | String | `''` | `closeable` `link` | -| delay | 动画延迟时间，单位秒 | Number | `1` | | -| scrollable | 是否滚动 | Boolean | `true` | | -| speed | 滚动速率，单位px | Number | `40` | | +| delay | 动画延迟时间，单位秒 | Number | `1` | - | +| speed | 滚动速率，单位px | Number | `40` | - | +| scrollable | 是否滚动 | Boolean | `true` | - | ### Event diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md index 899cb071e..ee7612ae6 100644 --- a/docs/examples-docs/panel.md +++ b/docs/examples-docs/panel.md @@ -1,19 +1,6 @@ diff --git a/packages/cell/index.vue b/packages/cell/index.vue index f356c8aa9..3bcf14a33 100644 --- a/packages/cell/index.vue +++ b/packages/cell/index.vue @@ -2,7 +2,7 @@
@@ -14,10 +14,10 @@
diff --git a/packages/panel/index.vue b/packages/panel/index.vue index 37003010c..eed3760d7 100644 --- a/packages/panel/index.vue +++ b/packages/panel/index.vue @@ -10,7 +10,7 @@
-
+
diff --git a/packages/vant-css/src/badge.css b/packages/vant-css/src/badge.css index 854c9d6b8..d79285264 100644 --- a/packages/vant-css/src/badge.css +++ b/packages/vant-css/src/badge.css @@ -32,9 +32,7 @@ display: block; } &::after { - @mixin border-retina (top); - @mixin border-retina (right); - @mixin border-retina (left); + @mixin border-retina (top, right, left); } } diff --git a/packages/vant-css/src/cell.css b/packages/vant-css/src/cell.css index 5bc960596..8b381dd41 100644 --- a/packages/vant-css/src/cell.css +++ b/packages/vant-css/src/cell.css @@ -37,6 +37,10 @@ &__title { display: table-cell; + + .van-icon { + margin-right: 5px; + } } &__label { diff --git a/packages/vant-css/src/loading.css b/packages/vant-css/src/loading.css index 5aa53f468..704897bf4 100644 --- a/packages/vant-css/src/loading.css +++ b/packages/vant-css/src/loading.css @@ -11,6 +11,7 @@ .van-loading { font-size: 0; + line-height: 0; &--circle { width: 16px;