diff --git a/example/pages/cell/index.wxml b/example/pages/cell/index.wxml index e1e987d6..af0efb24 100644 --- a/example/pages/cell/index.wxml +++ b/example/pages/cell/index.wxml @@ -15,7 +15,14 @@ - + diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js index 00660423..7c0cbd4b 100644 --- a/packages/cell-group/index.js +++ b/packages/cell-group/index.js @@ -1,4 +1,6 @@ Component({ + externalClasses: ['custom-class'], + properties: { border: { type: Boolean, diff --git a/packages/cell-group/index.wxml b/packages/cell-group/index.wxml index 3692f990..4ed34ace 100644 --- a/packages/cell-group/index.wxml +++ b/packages/cell-group/index.wxml @@ -1,3 +1,3 @@ - + diff --git a/packages/cell/README.md b/packages/cell/README.md index 24cad1c4..119bcddc 100644 --- a/packages/cell/README.md +++ b/packages/cell/README.md @@ -49,7 +49,13 @@ - + ``` @@ -77,6 +83,12 @@ |-----------|-----------|-----------|-------------| | border | 是否显示外边框 | `Boolean` | `true` | +### CellGroup 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | + ### Cell API | 参数 | 说明 | 类型 | 默认值 | @@ -85,11 +97,10 @@ | title | 左侧标题 | `String | Number` | - | | value | 右侧内容 | `String | Number` | - | | label | 标题下方的描述信息 | `String` | - | -| border | 是否显示内边框 | `Boolean` | `true` | +| border | 是否显示下边框 | `Boolean` | `true` | | center | 是否使内容垂直居中 | `Boolean` | `false` | | url | 跳转链接 | `String` | - | -| to | 路由跳转对象,同 `vue-router` 的 to | `String | Object` | - | -| replace | 跳转时是否替换当前 history | `String` | `false` | +| link-type | 链接跳转类型,可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` | | clickable | 是否开启点击反馈 | `Boolean` | `false` | | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | | required | 是否显示表单必填星号 | `Boolean` | `false` | @@ -99,13 +110,24 @@ | 事件名 | 说明 | 参数 | |-----------|-----------|-----------| -| click | 点击 cell 时触发 | - | +| tap | 点击 cell 时触发 | - | ### Cell Slot | 名称 | 说明 | |-----------|-----------| | - | 自定义显示内容 | -| icon | 自定义`icon` | -| title | 自定义`title` | -| right-icon | 自定义右侧按钮,默认是`arrow` | +| icon | 自定义`icon`,如果设置了`icon`属性则不生效 | +| title | 自定义`title`,如果设置了`title`属性则不生效 | +| right-icon | 自定义右侧按钮,默认是`arrow`,如果设置了`is-link`属性则不生效 | + +### Cell 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | +| title-class | 标题样式类 | +| label-class | 描述信息样式类 | +| value-class | 右侧内容样式类 | +| left-icon-class | 左侧图标样式类 | +| right-icon-class | 右侧图标样式类 | diff --git a/packages/cell/index.js b/packages/cell/index.js index 6e99a9e1..a0494860 100644 --- a/packages/cell/index.js +++ b/packages/cell/index.js @@ -1,5 +1,12 @@ Component({ - externalClasses: ['cell-class', 'title-class'], + externalClasses: [ + 'custom-class', + 'title-class', + 'label-class', + 'value-class', + 'left-icon-class', + 'right-icon-class' + ], options: { multipleSlots: true @@ -8,6 +15,7 @@ Component({ properties: { title: null, value: null, + url: String, icon: String, label: String, center: Boolean, @@ -15,6 +23,10 @@ Component({ required: Boolean, clickable: Boolean, arrowDirection: String, + linkType: { + type: String, + value: 'navigateTo' + }, border: { type: Boolean, value: true @@ -24,15 +36,10 @@ Component({ methods: { onTap() { this.triggerEvent('tap'); - this.navigate(); - }, - - navigate() { - const { url = '' } = this.data; - - if (!this.data.isLink || !url || url === 'true' || url === 'false') return; - - wx[this.data.linkType].call(wx, { url }); + const { url } = this.data; + if (url) { + wx[this.data.linkType]({ url }); + } } } }); diff --git a/packages/cell/index.wxml b/packages/cell/index.wxml index bfa5f26a..2d7a2b5a 100644 --- a/packages/cell/index.wxml +++ b/packages/cell/index.wxml @@ -1,29 +1,27 @@