diff --git a/docs/src/Preview.vue b/docs/src/Preview.vue index 5bbeb849..d35ad5e4 100644 --- a/docs/src/Preview.vue +++ b/docs/src/Preview.vue @@ -49,7 +49,8 @@ const MAP = { transition: 'transition-20180821.png', 'tree-select': 'tree-select-201808092138.png', checkbox: 'checkbox-20181110.jpeg', - rate: 'rate-20181120-1.png' + rate: 'rate-20181120-1.png', + collapse: 'collapse-20181123.png' }; export default { diff --git a/example/app.json b/example/app.json index a6d39e66..7eec9973 100644 --- a/example/app.json +++ b/example/app.json @@ -36,7 +36,8 @@ "pages/goods-action/index", "pages/swipe-cell/index", "pages/datetime-picker/index", - "pages/rate/index" + "pages/rate/index", + "pages/collapse/index" ], "window": { "navigationBarBackgroundColor": "#f8f8f8", @@ -91,6 +92,8 @@ "van-transition": "../../dist/transition/index", "van-tree-select": "../../dist/tree-select/index", "van-datetime-picker": "../../dist/datetime-picker/index", - "van-rate": "../../dist/rate/index" + "van-rate": "../../dist/rate/index", + "van-collapse": "../../dist/collapse/index", + "van-collapse-item": "../../dist/collapse-item/index" } } diff --git a/example/config.js b/example/config.js index 5c7c562d..696d756e 100644 --- a/example/config.js +++ b/example/config.js @@ -109,6 +109,10 @@ export default [ path: '/notice-bar', title: 'NoticeBar 通告栏' }, + { + path: '/collapse', + title: 'Collapse 折叠面板' + }, { path: '/panel', title: 'Panel 面板' diff --git a/example/pages/collapse/index.js b/example/pages/collapse/index.js new file mode 100644 index 00000000..39e097f4 --- /dev/null +++ b/example/pages/collapse/index.js @@ -0,0 +1,21 @@ +import Page from '../../common/page'; + +Page({ + data: { + active1: [0], + active2: 0, + active3: [], + title1: '有赞微商城', + title2: '有赞零售', + title3: '有赞美业', + content1: '提供多样店铺模板，快速搭建网上商城', + content2: '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失', + content3: '线上拓客，随时预约，贴心顺手的开单收银' + }, + onChange(event) { + const { key } = event.currentTarget.dataset; + this.setData({ + [key]: event.detail + }); + } +}); diff --git a/example/pages/collapse/index.json b/example/pages/collapse/index.json new file mode 100644 index 00000000..e2178559 --- /dev/null +++ b/example/pages/collapse/index.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "Collapse 折叠面板" +} diff --git a/example/pages/collapse/index.wxml b/example/pages/collapse/index.wxml new file mode 100644 index 00000000..2a28e4e5 --- /dev/null +++ b/example/pages/collapse/index.wxml @@ -0,0 +1,37 @@ + + + {{ content1 }} + {{ content2 }} + + {{ content3 }} + + + + + + + {{ content1 }} + {{ content2 }} + {{ content3 }} + + + + + + + {{ title1 }} + {{ content1 }} + + {{ content2 }} + {{ content3 }} + + diff --git a/example/pages/collapse/index.wxss b/example/pages/collapse/index.wxss new file mode 100644 index 00000000..71c599a9 --- /dev/null +++ b/example/pages/collapse/index.wxss @@ -0,0 +1,12 @@ +.van-collapse-item__content { + font-size: 13px; + line-height: 1.5; + color: #666; +} + +.van-icon-question { + margin-left: 5px; + font-size: 15px !important; + color: #1989fa; + vertical-align: -3px; +} diff --git a/packages/cell/index.less b/packages/cell/index.less index 1a40b533..e615a431 100644 --- a/packages/cell/index.less +++ b/packages/cell/index.less @@ -54,10 +54,13 @@ &__left-icon-wrap { margin-right: 5px; + font-size: 16px; } &__right-icon-wrap { margin-left: 5px; + font-size: 12px; + color: @gray-dark; &--left { transform: rotate(180deg); @@ -73,14 +76,11 @@ } &__left-icon { - font-size: 16px !important; line-height: 24px; vertical-align: middle; } &__right-icon { - color: @gray-dark; - font-size: 12px !important; line-height: 24px; } diff --git a/packages/cell/index.ts b/packages/cell/index.ts index c4f50aab..709a4412 100644 --- a/packages/cell/index.ts +++ b/packages/cell/index.ts @@ -5,7 +5,8 @@ VantComponent({ classes: [ 'title-class', 'label-class', - 'value-class' + 'value-class', + 'right-icon-class' ], mixins: [link], @@ -47,7 +48,7 @@ VantComponent({ }, iconWrapClass(): string { - const prefix = 'van-cell__right-icon-wrap'; + const prefix = 'van-cell__right-icon-wrap right-icon-class'; return this.classNames(prefix, `${prefix}--${this.data.arrowDirection}`); } }, diff --git a/packages/collapse-item/index.json b/packages/collapse-item/index.json new file mode 100644 index 00000000..0e5425cd --- /dev/null +++ b/packages/collapse-item/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "van-cell": "../cell/index" + } +} diff --git a/packages/collapse-item/index.less b/packages/collapse-item/index.less new file mode 100644 index 00000000..e883feb2 --- /dev/null +++ b/packages/collapse-item/index.less @@ -0,0 +1,38 @@ +@import '../common/style/var.less'; + +.van-collapse-item { + &__title { + .van-cell__right-icon { + transform: rotate(90deg); + transition: 0.3s; + } + + &--expanded { + .van-cell__right-icon { + transform: rotate(-90deg); + } + } + + &--disabled { + & .van-cell, + & .van-cell__right-icon { + color: @gray !important; + } + + &:active { + background-color: @white !important; + } + } + } + + &__wrapper { + overflow: hidden; + will-change: max-height; + transition: max-height 0.3s ease-in-out; + } + + &__content { + padding: 15px; + background-color: @white; + } +} diff --git a/packages/collapse-item/index.ts b/packages/collapse-item/index.ts new file mode 100644 index 00000000..63aa4c6a --- /dev/null +++ b/packages/collapse-item/index.ts @@ -0,0 +1,96 @@ +import { VantComponent } from '../common/component'; + +VantComponent({ + classes: ['content-class'], + + relation: { + name: 'collapse', + type: 'ancestor', + linked(parent: Weapp.Component) { + this.parent = parent; + } + }, + + props: { + name: [String, Number], + icon: String, + label: String, + title: [String, Number], + value: [String, Number], + disabled: Boolean, + border: { + type: Boolean, + value: true + }, + isLink: { + type: Boolean, + value: true + } + }, + + data: { + contentHeight: 0, + expanded: false + }, + + computed: { + titleClass() { + const { disabled, expanded } = this.data; + return this.classNames('van-collapse-item__title', { + 'van-collapse-item__title--disabled': disabled, + 'van-collapse-item__title--expanded': expanded + }); + } + }, + + methods: { + updateExpanded() { + if (!this.parent) { + return null; + } + + const { value, accordion, items } = this.parent.data; + const { name } = this.data; + + const index = items.indexOf(this); + const currentName = name == null ? index : name; + + const expanded = accordion + ? value === currentName + : value.some(name => name === currentName); + + if (expanded !== this.data.expanded) { + this.updateStyle(expanded); + } + + this.setData({ expanded }); + }, + + updateStyle(expanded) { + if (expanded) { + this.getRect('.van-collapse-item__content').then(res => { + this.setData({ + contentHeight: res.height ? res.height + 'px' : null + }); + }); + } else { + this.setData({ + contentHeight: 0 + }); + } + }, + + onClick() { + if (this.data.disabled) { + return; + } + + const { name, expanded } = this.data; + + const index = this.parent.data.items.indexOf(this); + const currentName = name == null ? index : name; + + this.parent.switch(currentName, !expanded); + } + } +}); diff --git a/packages/collapse-item/index.wxml b/packages/collapse-item/index.wxml new file mode 100644 index 00000000..f1fc9d3c --- /dev/null +++ b/packages/collapse-item/index.wxml @@ -0,0 +1,39 @@ + + + + + + + + + + + + + diff --git a/packages/collapse/README.md b/packages/collapse/README.md new file mode 100644 index 00000000..2ff3813e --- /dev/null +++ b/packages/collapse/README.md @@ -0,0 +1,127 @@ +## Collapse 折叠面板 + +### 使用指南 +在 app.json 或 index.json 中引入组件 +```json +"usingComponents": { + "van-collapse": "path/to/vant-weapp/dist/collapse/index", + "van-collapse-item": "path/to/vant-weapp/dist/collapse-item/index" +} +``` + +### 代码演示 + +#### 基础用法 +通过`value`控制展开的面板列表，`activeNames`为数组格式 + +```html + + + 提供多样店铺模板，快速搭建网上商城 + + + 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失 + + + 线上拓客，随时预约，贴心顺手的开单收银 + + +``` + +``` javascript +Page({ + data: { + activeNames: ['1'] + } +}); +``` + +#### 手风琴 +通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式 + +```html + + + 提供多样店铺模板，快速搭建网上商城 + + + 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失 + + + 线上拓客，随时预约，贴心顺手的开单收银 + + +``` + +``` javascript +Page({ + data: { + activeName: '1' + } +}); +``` + +#### 自定义标题内容 + +```html + + + 有赞微商城 + 提供多样店铺模板，快速搭建网上商城 + + + 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失 + + +``` + + + +### Collapse API + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +|------|------|------|------|------| +| value | 当前展开面板的 name | `Array | String | Number` | - | +| accordion | 是否开启手风琴模式 | `Boolean` | `false` | + +### Collapse Event + +| 事件名 | 说明 | 参数 | +|------|------|------| +| change | 切换面板时触发 | activeNames: `String | Array` | + +### CollapseItem API + +| 参数 | 说明 | 类型 | 默认值 | +|------|------|------|------|------| +| name | 唯一标识符，默认为索引值 | `String | Number` | `index` | +| title | 标题栏左侧内容 | `String | Number` | - | +| icon | 标题栏左侧图标，可选值见 Icon 组件 | `String` | - | +| value | 标题栏右侧内容 | `String | Number` | - | +| label | 标题栏描述信息 | `String` | - | +| border | 是否显示内边框 | `Boolean` | `true` | +| is-link | 是否展示标题栏右侧箭头并开启点击反馈 | `Boolean` | `true` | +| disabled | 是否禁用面板 | `Boolean` | `false` | + +### CollapseItem Slot + +| 名称 | 说明 | +|------|------| +| - | 面板内容 | +| value | 自定义显示内容 | +| icon | 自定义`icon` | +| title | 自定义`title` | +| right-icon | 自定义右侧按钮，默认是`arrow` | + +### Collapse 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | + +### CollapseItem 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | +| content-class | 内容样式类 | diff --git a/packages/collapse/index.json b/packages/collapse/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/collapse/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/collapse/index.ts b/packages/collapse/index.ts new file mode 100644 index 00000000..56da046c --- /dev/null +++ b/packages/collapse/index.ts @@ -0,0 +1,52 @@ +import { VantComponent } from '../common/component'; + +VantComponent({ + relation: { + name: 'collapse-item', + type: 'descendant', + linked(child: Weapp.Component) { + this.setData({ + items: [...this.data.items, child] + }, () => { + child.updateExpanded(); + }); + } + }, + + props: { + accordion: Boolean, + value: null + }, + + data: { + items: [] + }, + + watch: { + value() { + this.data.items.forEach(child => { + child.updateExpanded(); + }); + }, + accordion() { + this.data.items.forEach(child => { + child.updateExpanded(); + }); + } + }, + + methods: { + switch(name, expanded) { + const { accordion, value } = this.data; + if (!accordion) { + name = expanded + ? value.concat(name) + : value.filter(activeName => activeName !== name); + } else { + name = expanded ? name : ''; + } + this.$emit('change', name); + this.$emit('input', name); + } + } +}); diff --git a/packages/collapse/index.wxml b/packages/collapse/index.wxml new file mode 100644 index 00000000..49667522 --- /dev/null +++ b/packages/collapse/index.wxml @@ -0,0 +1,3 @@ + + +