diff --git a/example/pages/cell/index.json b/example/pages/cell/index.json index 9c90eda1..73e559d2 100644 --- a/example/pages/cell/index.json +++ b/example/pages/cell/index.json @@ -1,10 +1,10 @@ { "navigationBarTitleText": "Cell 单元格", "usingComponents": { + "demo-block": "../../components/demo-block/index", "van-cell": "../../dist/cell/index", "van-icon": "../../dist/icon/index", - "van-badge": "../../dist/badge/index", - "van-panel": "../../dist/panel/index", + "van-tag": "../../dist/tag/index", "van-cell-group": "../../dist/cell-group/index" } } diff --git a/example/pages/cell/index.wxml b/example/pages/cell/index.wxml index b6339747..e1e987d6 100644 --- a/example/pages/cell/index.wxml +++ b/example/pages/cell/index.wxml @@ -1,64 +1,35 @@ - - - - - - - - - - - - - - - - - - - - - - - - 选择日期: {{date}} - - - - - - - - - - - - - - + - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + 单元格 + 标签 + + + + + - + diff --git a/example/pages/cell/index.wxss b/example/pages/cell/index.wxss index 8f5622b7..ec685b3c 100644 --- a/example/pages/cell/index.wxss +++ b/example/pages/cell/index.wxss @@ -1,4 +1,5 @@ -.cell-panel-demo { - display: block; - margin-top: 15px; -} \ No newline at end of file +.title { + margin-right: 5px; + display: inline-block; + vertical-align: middle; +} diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js index 9d41e5bc..00660423 100644 --- a/packages/cell-group/index.js +++ b/packages/cell-group/index.js @@ -1,5 +1,5 @@ Component({ - props: { + properties: { border: { type: Boolean, value: true diff --git a/packages/cell-group/index.pcss b/packages/cell-group/index.pcss new file mode 100644 index 00000000..12a82f21 --- /dev/null +++ b/packages/cell-group/index.pcss @@ -0,0 +1 @@ +@import '../helper/index.pcss'; diff --git a/packages/cell-group/index.wxml b/packages/cell-group/index.wxml index 79bb2bff..3692f990 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 acec7052..24cad1c4 100644 --- a/packages/cell/README.md +++ b/packages/cell/README.md @@ -2,77 +2,110 @@ ### 使用指南 -#### 单个 cell 使用示例 +在 index.json 中引入组件 ```json - { - "usingComponents": { - "van-cell": "path/to/vant-weapp/dist/cell/index", - } - } +"usingComponents": { + "van-cell": "path/to/vant-weapp/dist/cell/index", + "van-cell-group": "path/to/vant-weapp/dist/cell-group/index" +} ``` -```wxml - -``` +### 代码演示 -### 属性与事件 +#### 基础用法 -| 名称 | 类型 | 是否必须 | 默认 | 描述 | -| ------------- | ----------- | -------- | ----- | -------------------------------------------------------------------------------------------------------- | -| title | String | 否 | 无 | 左侧标题 | -| label | Boolean | 否 | false | 标题下方的描述信息 | -| value | String | 否 | 取消 | 右侧内容 | -| noBorder | Boolean | 否 | false | 不显示下边线 | -| isLink | Boolean | 否 | false | 是否展示右侧箭头并开启尝试以 url 跳转 | -| url | String | 否 | - | 当 isLink 设置为 true 时，点击 cell 会尝试跳转到该路径 | -| linkType | String | 否 | navigateTo | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch` | -| onlyTapFooter | Boolean | 否 | false | 只有点击 footer 区域才触发 tab 事件 | -| bindtap | EventHandle | 否 | 无 | 点击 cell 时触发，`onlyTapFooter` 为 `true` 时点击 footer 区域触发 | +将`van-cell-group`组件看成一个容器即可 -### 可用的 slot - -| 名称 | 是否必须 | 默认 | 描述 | -| ------------- | ----------- | ---- | --------------------------------------------------------------------- | -| 默认 | 否 | 无 | 左侧除了 `title`，`label` 外的自定义 wxml 内容 | -| icon | 否 | 无 | 标题前自定义的 icon，可使用 `icon` 自定义组件，具体使用参考 icon 组件 | -| footer | 否 | 无 | 右侧自定义 wxml 内容，如果设置了 `value` 属性，则不生效 | - -### 外部样式类 -| 类名 | 说明 | -|-----------|-----------| -| cell-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 | -| title-class | title区域自定义样式 | - -#### cell 组使用示例 -多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。 - -```json - { - "usingComponents": { - "van-cell": "path/to/vant-weapp/dist/cell/index", - "van-cell-group": "path/to/vant-weapp/dist/cell-group/index" - } - } -``` - -`cell-group`提供`title-width`控制组内整体 cell 的 title 区域宽度 -```wxml - - - - - - - - - - +```html + + + ``` -### 属性与事件 +#### 只设置value +只设置`value`时会向左对齐 -| 名称 | 类型 | 是否必须 | 默认 | 描述 | -| ---------- | ------- | -------- | ----- | ---------------- | -| titleWidth | Number | 否 | 无 | title宽度 | -| border | Boolean | 否 | false | 是否显示上下边框 | +```html + + + +``` + +#### 展示图标 +通过`icon`属性在标题左侧展示图标 + +```html + + + +``` + + +#### 展示箭头 +传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向 + +```html + + + + + +``` + +#### 高级用法 +如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容 + +```html + + + + + + + + + +``` + +### CellGroup API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| border | 是否显示外边框 | `Boolean` | `true` | + +### Cell API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| icon | 左侧图标，可选值见 Icon 组件 | `String` | - | +| title | 左侧标题 | `String | Number` | - | +| value | 右侧内容 | `String | Number` | - | +| label | 标题下方的描述信息 | `String` | - | +| border | 是否显示内边框 | `Boolean` | `true` | +| center | 是否使内容垂直居中 | `Boolean` | `false` | +| url | 跳转链接 | `String` | - | +| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | +| replace | 跳转时是否替换当前 history | `String` | `false` | +| clickable | 是否开启点击反馈 | `Boolean` | `false` | +| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | +| required | 是否显示表单必填星号 | `Boolean` | `false` | +| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - | + +### Cell Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| click | 点击 cell 时触发 | - | + +### Cell Slot + +| 名称 | 说明 | +|-----------|-----------| +| - | 自定义显示内容 | +| icon | 自定义`icon` | +| title | 自定义`title` | +| right-icon | 自定义右侧按钮，默认是`arrow` | diff --git a/packages/cell/index.js b/packages/cell/index.js index c7a2ad63..6e99a9e1 100644 --- a/packages/cell/index.js +++ b/packages/cell/index.js @@ -1,105 +1,38 @@ -const warn = (msg, getValue) => { - console.warn(msg); - console.log('接受到的值为：', getValue); -}; - Component({ externalClasses: ['cell-class', 'title-class'], + options: { multipleSlots: true }, - relations: { - '../cell-group/index': { - type: 'parent' + + properties: { + title: null, + value: null, + icon: String, + label: String, + center: Boolean, + isLink: Boolean, + required: Boolean, + clickable: Boolean, + arrowDirection: String, + border: { + type: Boolean, + value: true } }, - properties: { - title: { - type: String, - description: '左侧标题' - }, - label: { - type: String, - description: '标题下方的描述信息' - }, - value: { - type: String, - description: '右侧内容' - }, - onlyTapFooter: { - type: Boolean, - description: '只有点击 footer 区域才触发 tab 事件' - }, - isLink: { - type: null, - value: '', - description: '是否展示右侧箭头并开启尝试以 url 跳转' - }, - linkType: { - type: String, - value: 'navigateTo', - description: '链接类型，可选值为 navigateTo，redirectTo，switchTab，reLaunch' - }, - url: { - type: String, - value: '' - }, - noBorder: Boolean - }, - data: { - isLastCell: true, - titleWidth: 'auto' - }, + methods: { - footerTap() { - // 如果并没有设置只点击 footer 生效，那就不需要额外处理。cell 上有事件会自动处理 - if (!this.data.onlyTapFooter) { - return; - } - - this.triggerEvent('tap', {}); - doNavigate.call(this); + onTap() { + this.triggerEvent('tap'); + this.navigate(); }, - cellTap() { - // 如果只点击 footer 生效，那就不需要在 cell 根节点上处理 - if (this.data.onlyTapFooter) { - return; - } + navigate() { + const { url = '' } = this.data; - this.triggerEvent('tap', {}); - doNavigate.call(this); - }, + if (!this.data.isLink || !url || url === 'true' || url === 'false') return; - // 用于被 cell-group 更新，标志是否是最后一个 cell - updateIsLastElement(isLastCell) { - this.setData({ isLastCell }); - }, - - // 设置统一的title区域宽度 - setTitleWidth(titleWidth) { - this.setData({ - titleWidth: `${titleWidth}px` - }); + wx[this.data.linkType].call(wx, { url }); } } }); - -// 处理跳转 -function doNavigate() { - const { url = '' } = this.data; - const type = typeof this.data.isLink; - - if (!this.data.isLink || !url || url === 'true' || url === 'false') return; - - if (type !== 'boolean' && type !== 'string') { - warn('isLink 属性值必须是一个字符串或布尔值', this.data.isLink); - return; - } - - if (['navigateTo', 'redirectTo', 'switchTab', 'reLaunch'].indexOf(this.data.linkType) === -1) { - warn('linkType 属性可选值为 navigateTo，redirectTo，switchTab，reLaunch', this.data.linkType); - return; - } - wx[this.data.linkType].call(wx, { url }); -} diff --git a/packages/cell/index.json b/packages/cell/index.json index 32640e0d..a9ab393a 100644 --- a/packages/cell/index.json +++ b/packages/cell/index.json @@ -1,3 +1,6 @@ { - "component": true + "component": true, + "usingComponents": { + "van-icon": "../icon/index" + } } \ No newline at end of file diff --git a/packages/cell/index.pcss b/packages/cell/index.pcss index d1b44e0d..0a12bafc 100644 --- a/packages/cell/index.pcss +++ b/packages/cell/index.pcss @@ -1,98 +1,94 @@ -@import "../common/_mixins"; +@import '../helper/index.pcss'; + +:host:last-child { + background-color: red; +} .van-cell { - position: relative; - padding: 12px 15px; + width: 100%; display: flex; - align-items: center; - line-height: 1.4; - background-color: #fff; + padding: 10px 15px; + box-sizing: border-box; + line-height: 24px; + position: relative; + background-color: $white; + color: $text-color; font-size: 14px; + overflow: hidden; &::after { - @mixin hairline; - border-bottom-width: 1px; left: 15px; right: 0; + width: auto; + transform: scale(1, .5); + border-bottom-width: 1px; } - &__icon { - margin-right: 5px; - - &:empty { - display: none - } + &-group { + background-color: $white; } - &__title { - padding-right: 10px; - &:empty { - display: none; - } + &__label { + font-size: 12px; + line-height: 1.2; + color: $gray-darker; } - &__bd { + &__title, + &__value { flex: 1; } - &__text { - line-height: 24px; - font-size: 14px; - } - - &__desc { - line-height: 1.2; - font-size: 12px; - color: #666; - } - - &__ft { - position: relative; + &__value { + overflow: hidden; text-align: right; - color: #666; + vertical-align: middle; } - &__no-pading{ - padding: 0; + &__left-icon { + font-size: 16px; + line-height: 24px; + margin-right: 5px; + } - .van-cell__bd_padding { - padding: 12px 0 12px 15px; + &__right-icon { + color: $gray-dark; + font-size: 12px; + line-height: 24px; + margin-left: 5px; - .van-form__input{ - height: 26px; - } + &--left::before { + transform: rotate(180deg); } - .van-cell__ft_padding { - padding: 12px 15px 12px 0; + &--up::before { + transform: rotate(-90deg); + } + + &--down::before { + transform: rotate(90deg); } } - &.last-cell::after, &.no-border::after { - display: none; + &--clickable { + &:active { + background-color: $active-color; + } } -} + &--required { + overflow: visible; + &::before { + content: '*'; + position: absolute; + left: 7px; + font-size: 14px; + color: $red; + } + } -.van-cell--access .van-cell__ft { - padding-right: 13px; -} - -.van-cell--access .van-cell__ft::after { - position: absolute; - top: 50%; - right: 2px; - content: " "; - display: inline-block; - height: 6px; - width: 6px; - border-width: 2px 2px 0 0; - border-color: #c8c8c8; - border-style: solid; - transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0); -} -.van-cell--switch { - padding-top: 6px; - padding-bottom: 6px; + &--center { + align-items: center; + } } diff --git a/packages/cell/index.wxml b/packages/cell/index.wxml index 820bb76f..bfa5f26a 100644 --- a/packages/cell/index.wxml +++ b/packages/cell/index.wxml @@ -1,25 +1,31 @@ - + + - - + + {{ title }} + {{ label }} + + + - - {{ title }} - {{ label }} + + {{ value }} + + + - - - + + - - {{ value }} - - - - - \ No newline at end of file + + diff --git a/packages/helper/common/hairline.pcss b/packages/helper/common/hairline.pcss index ee0f6077..9013d5d5 100644 --- a/packages/helper/common/hairline.pcss +++ b/packages/helper/common/hairline.pcss @@ -1,5 +1,6 @@ @import "../mixins/border-retina.pcss"; +.van-hairline, .van-hairline--top, .van-hairline--left, .van-hairline--right, @@ -17,7 +18,7 @@ &--top::after { border-top-width: 1px; } -z + &--left::after { border-left-width: 1px; }