mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat: cell 自定义组件 (#162)
This commit is contained in:
刘建东
Yao
parent
541517361b
commit
a1b70a8437
@ -1,3 +1,8 @@
|
|||||||
{
|
{
|
||||||
"navigationBarTitleText": "Cell 单元格"
|
"navigationBarTitleText": "Cell 单元格",
|
||||||
|
"usingComponents": {
|
||||||
|
"zan-cell": "../../dist/cell/index",
|
||||||
|
"zan-icon": "../../dist/icon/index",
|
||||||
|
"zan-cell-group": "../../dist/cell-group/index"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,114 +5,46 @@
|
|||||||
<view class="doc-title zan-hairline--bottom">CELL</view>
|
<view class="doc-title zan-hairline--bottom">CELL</view>
|
||||||
|
|
||||||
<view class="zan-panel">
|
<view class="zan-panel">
|
||||||
<view class="zan-cell">
|
<zan-cell title="单行列表"></zan-cell>
|
||||||
<view class="zan-cell__bd">单行列表</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="zan-panel">
|
<view class="zan-panel">
|
||||||
<view class="zan-cell">
|
<zan-cell title="单行列表" value="详细信息"></zan-cell>
|
||||||
<view class="zan-cell__bd">单行列表</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="zan-panel">
|
<view class="zan-panel">
|
||||||
<view class="zan-cell">
|
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
|
||||||
<view class="zan-cell__icon zan-icon zan-icon-checked" style="color:#38f;"></view>
|
</view>
|
||||||
<view class="zan-cell__bd">单行列表</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
<view class="zan-panel-title">带 icon 的 cell</view>
|
||||||
</view>
|
<view class="zan-panel">
|
||||||
|
<zan-cell title="单行列表" value="详细信息">
|
||||||
|
<zan-icon slot="icon" type="checked"></zan-icon>
|
||||||
|
</zan-cell>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="zan-panel-title">带箭头的 cell</view>
|
||||||
|
<view class="zan-panel">
|
||||||
|
<zan-cell title="只显示箭头" is-link="{{true}}"></zan-cell>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="zan-panel">
|
<view class="zan-panel">
|
||||||
<view class="zan-cell">
|
<zan-cell title="跳转到首页" is-link="/pages/dashboard/index"></zan-cell>
|
||||||
<view class="zan-cell__bd">
|
|
||||||
<view class="zan-cell__text">单行列表</view>
|
|
||||||
<view class="zan-cell__desc">附加描述</view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="zan-panel-title">cell 组</view>
|
||||||
<view class="zan-panel">
|
<view class="zan-panel">
|
||||||
<view class="zan-cell zan-cell--access">
|
<zan-cell-group>
|
||||||
<view class="zan-cell__bd">单行列表</view>
|
<zan-cell title="只显示箭头" is-link="{{true}}"></zan-cell>
|
||||||
<view class="zan-cell__ft"></view>
|
<zan-cell title="跳转到首页" is-link="/pages/dashboard/index"></zan-cell>
|
||||||
</view>
|
<zan-cell title="只有 footer 点击有效" is-link="/pages/dashboard/index" only-tap-footer></zan-cell>
|
||||||
|
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
|
||||||
|
<zan-cell title="表单">
|
||||||
|
<input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
|
||||||
|
</zan-cell>
|
||||||
|
<zan-cell title="开关">
|
||||||
|
<switch slot="footer" checked/>
|
||||||
|
</zan-cell>
|
||||||
|
</zan-cell-group>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="zan-panel">
|
|
||||||
<view class="zan-cell zan-cell--switch">
|
|
||||||
<view class="zan-cell__bd">开关</view>
|
|
||||||
<view class="zan-cell__ft">
|
|
||||||
<template is="zan-switch" data="{{ checked }}"/>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="zan-panel">
|
|
||||||
<view class="zan-cell zan-cell--access">
|
|
||||||
<view class="zan-cell__bd">单行列表</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="zan-panel">
|
|
||||||
<view class="zan-cell">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="zan-panel">
|
|
||||||
<view class="zan-cell">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="zan-panel">
|
|
||||||
<view class="zan-cell zan-cell--access">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
<view class="zan-cell__ft"></view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell zan-cell--access">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
<view class="zan-cell__ft"></view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell zan-cell--access">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
<view class="zan-cell__ft"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="zan-panel">
|
|
||||||
<view class="zan-cell zan-cell--access">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell zan-cell--access">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell zan-cell--access">
|
|
||||||
<view class="zan-cell__bd">多行列表</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
19
packages/cell-group/index.js
Normal file
19
packages/cell-group/index.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
Component({
|
||||||
|
relations: {
|
||||||
|
'../cell/index': {
|
||||||
|
type: 'child',
|
||||||
|
linked (target) {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ready () {
|
||||||
|
let cells = this.getRelationNodes('../cell/index')
|
||||||
|
|
||||||
|
if (cells.length > 0) {
|
||||||
|
let lastIndex = cells.length - 1
|
||||||
|
|
||||||
|
cells.forEach((cell, index) => {
|
||||||
|
if (index < lastIndex) cell.notLastCell()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
3
packages/cell-group/index.json
Normal file
3
packages/cell-group/index.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"component": true
|
||||||
|
}
|
||||||
3
packages/cell-group/index.wxml
Normal file
3
packages/cell-group/index.wxml
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<view class="cell-group">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
@ -1,54 +1,68 @@
|
|||||||
## Cell 单元格
|
## Cell 单元格
|
||||||
|
|
||||||
### 使用指南
|
自定义 cell 组件
|
||||||
在 app.wxss 中引入组件库所有样式
|
|
||||||
```css
|
### 属性与事件
|
||||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
|
||||||
|
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||||
|
| ------------- | ----------- | -------- | ----- | -------------------------------------------------------------------------------------------------------- |
|
||||||
|
| title | String | 否 | 无 | 左侧标题 |
|
||||||
|
| label | Boolean | 否 | false | 标题下方的描述信息 |
|
||||||
|
| value | String | 否 | 取消 | 右侧内容 |
|
||||||
|
| isLink | Number | 否 | 55 | 链接，用于导航，如果是 `Boolean` 型值则只显示链接样式，`String` 类型值才做导航，但是组件不检查路径正确性 |
|
||||||
|
| linkType | String | 否 | 无 | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch` |
|
||||||
|
| onlyTapFooter | Boolean | 否 | false | 只有点击 footer 区域才触发 tab 事件 |
|
||||||
|
| bindtap | EventHandle | 否 | 无 | 点击 cell 时触发，`onlyTapFooter` 为 `true` 时点击 footer 区域触发 |
|
||||||
|
|
||||||
|
### 可用的 slot
|
||||||
|
|
||||||
|
| 名称 | 是否必须 | 默认 | 描述 |
|
||||||
|
| ------------- | ----------- | ---- | --------------------------------------------------------------------- |
|
||||||
|
| 默认 | 否 | 无 | 左侧除了 `title`，`label` 外的自定义 wxml 内容 |
|
||||||
|
| icon | 否 | 无 | 标题前自定义的 icon，可使用 `icon` 自定义组件，具体使用参考 icon 组件 |
|
||||||
|
| footer | 否 | 无 | 右侧自定义 wxml 内容，如果设置了 `value` 属性，则不生效 |
|
||||||
|
|
||||||
|
### cell 组
|
||||||
|
|
||||||
|
多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。
|
||||||
|
|
||||||
|
#### 单个 cell 使用示例
|
||||||
|
~~~json
|
||||||
|
{
|
||||||
|
...
|
||||||
|
"usingComponents": {
|
||||||
|
"zan-cell": "../../dist/cell/index",
|
||||||
|
}
|
||||||
|
...
|
||||||
|
}
|
||||||
|
~~~
|
||||||
|
|
||||||
|
~~~wxml
|
||||||
|
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
|
||||||
|
~~~
|
||||||
|
|
||||||
|
#### cell 组使用示例
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
...
|
||||||
|
"usingComponents": {
|
||||||
|
"zan-cell": "../../dist/cell/index",
|
||||||
|
"zan-cell-group": "../../dist/cell-group/index"
|
||||||
|
}
|
||||||
|
...
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 代码演示
|
```wxml
|
||||||
|
<zan-cell-group>
|
||||||
#### 基础用法
|
<zan-cell title="只显示箭头" is-link="{{true}}"></zan-cell>
|
||||||
`zan-cell` 有三部分组成：
|
<zan-cell title="跳转到首页" is-link="/pages/dashboard/index"></zan-cell>
|
||||||
顶部 Icon：`zan-cell__icon`
|
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
|
||||||
主内容区：`zan-cell__bd`
|
<zan-cell title="表单">
|
||||||
附属内容：`zan-cell__ft`
|
<input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
|
||||||
|
</zan-cell>
|
||||||
```html
|
<zan-cell title="开关">
|
||||||
<view class="zan-cell">
|
<switch slot="footer" checked/>
|
||||||
<view class="zan-cell__icon zan-icon zan-icon-check"></view>
|
</zan-cell>
|
||||||
<view class="zan-cell__bd">单行列表</view>
|
</zan-cell-group>
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
```
|
||||||
</view>
|
|
||||||
```
|
|
||||||
|
|
||||||
当然，也可以在内容区增加附加描述
|
|
||||||
```html
|
|
||||||
<view class="zan-cell">
|
|
||||||
<view class="zan-cell__bd">
|
|
||||||
<view class="zan-cell__text">单行列表</view>
|
|
||||||
<view class="zan-cell__desc">附加描述</view>
|
|
||||||
</view>
|
|
||||||
<view class="zan-cell__ft">详细信息</view>
|
|
||||||
</view>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 带箭头的单元格
|
|
||||||
在根元素上增加 `zan-cell--access`，可以在右侧显示出箭头。
|
|
||||||
```html
|
|
||||||
<view class="zan-cell zan-cell--access">
|
|
||||||
<view class="zan-cell__bd">单行列表</view>
|
|
||||||
<view class="zan-cell__ft"></view>
|
|
||||||
</view>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 带开关的单元格
|
|
||||||
增加 `zan-cell--switch`，更好的适配带有开关的情况
|
|
||||||
```html
|
|
||||||
<view class="zan-cell zan-cell--switch">
|
|
||||||
<view class="zan-cell__bd">开关</view>
|
|
||||||
<view class="zan-cell__ft">
|
|
||||||
<template is="zan-switch" data="{{ checked }}"/>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
```
|
|
||||||
75
packages/cell/index.js
Normal file
75
packages/cell/index.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
const warn = (msg, getValue) => {
|
||||||
|
console.warn(msg)
|
||||||
|
console.log('接受到的值为：', getValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
Component({
|
||||||
|
options: {
|
||||||
|
multipleSlots: true
|
||||||
|
},
|
||||||
|
relations: {
|
||||||
|
'../cell-group/index': {
|
||||||
|
type: 'parent'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
description: '左侧标题'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
description: '标题下方的描述信息'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
description: '右侧内容'
|
||||||
|
},
|
||||||
|
onlyTapFooter: {
|
||||||
|
type: Boolean,
|
||||||
|
description: '只有点击 footer 区域才触发 tab 事件'
|
||||||
|
},
|
||||||
|
isLink: {
|
||||||
|
type: null,
|
||||||
|
value: '',
|
||||||
|
description: '链接，用于导航，如果是 Boolean 型值则只显示链接样式，String 类型值才做导航，但是组件不检查路径正确性'
|
||||||
|
},
|
||||||
|
linkType: {
|
||||||
|
type: String,
|
||||||
|
value: 'navigateTo',
|
||||||
|
description: '链接类型，可选值为 navigateTo，redirectTo，switchTab，reLaunch'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
isLastCell: true
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
navigateTo () {
|
||||||
|
let url = this.data.isLink.toString()
|
||||||
|
let type = typeof this.data.isLink
|
||||||
|
|
||||||
|
this.triggerEvent('tap', {})
|
||||||
|
|
||||||
|
if (!this.data.isLink || 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 })
|
||||||
|
},
|
||||||
|
cellTap () {
|
||||||
|
if (!this.data.onlyTapFooter) {
|
||||||
|
this.navigateTo()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
notLastCell () {
|
||||||
|
this.setData({ isLastCell: false })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
3
packages/cell/index.json
Normal file
3
packages/cell/index.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"component": true
|
||||||
|
}
|
||||||
@ -16,9 +16,13 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zan-cell__icon {
|
.zan-cell .zan-cell__icon {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
.zan-cell .zan-cell__icon:empty {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
.zan-cell__bd {
|
.zan-cell__bd {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
@ -49,8 +53,7 @@
|
|||||||
padding: 12px 15px 12px 0;
|
padding: 12px 15px 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zan-cell--last-child::after,
|
.zan-cell.last-cell::after {
|
||||||
.zan-cell:last-child::after {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
21
packages/cell/index.wxml
Normal file
21
packages/cell/index.wxml
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<view
|
||||||
|
bindtap="cellTap"
|
||||||
|
class="zan-cell {{ isLastCell ? 'last-cell' : '' }} {{ isLink ? 'zan-cell--access' : '' }}">
|
||||||
|
|
||||||
|
<view class="zan-cell__icon">
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="zan-cell__bd">
|
||||||
|
<view class="zan-cell__text">{{ title }}</view>
|
||||||
|
<view class="zan-cell__desc">{{ label }}</view>
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view catchtap="navigateTo" class="zan-cell__ft">
|
||||||
|
{{ value }}
|
||||||
|
<block wx:if="{{ !value }}">
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
Loading…
x
Reference in New Issue
Block a user