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="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
</view>
|
||||
<zan-cell title="单行列表"></zan-cell>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<zan-cell title="单行列表" value="详细信息"></zan-cell>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__icon zan-icon zan-icon-checked" style="color:#38f;"></view>
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">带 icon 的 cell</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 class="zan-panel">
|
||||
<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 title="跳转到首页" is-link="/pages/dashboard/index"></zan-cell>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">cell 组</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>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="只显示箭头" is-link="{{true}}"></zan-cell>
|
||||
<zan-cell title="跳转到首页" is-link="/pages/dashboard/index"></zan-cell>
|
||||
<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 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>
|
||||
|
||||
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 单元格
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
自定义 cell 组件
|
||||
|
||||
### 属性与事件
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
| ------------- | ----------- | -------- | ----- | -------------------------------------------------------------------------------------------------------- |
|
||||
| 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"
|
||||
}
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
`zan-cell` 有三部分组成：
|
||||
顶部 Icon：`zan-cell__icon`
|
||||
主内容区：`zan-cell__bd`
|
||||
附属内容：`zan-cell__ft`
|
||||
|
||||
```html
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__icon zan-icon zan-icon-check"></view>
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<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>
|
||||
```
|
||||
```wxml
|
||||
<zan-cell-group>
|
||||
<zan-cell title="只显示箭头" is-link="{{true}}"></zan-cell>
|
||||
<zan-cell title="跳转到首页" is-link="/pages/dashboard/index"></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>
|
||||
```
|
||||
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;
|
||||
}
|
||||
|
||||
.zan-cell__icon {
|
||||
.zan-cell .zan-cell__icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.zan-cell .zan-cell__icon:empty {
|
||||
display: none
|
||||
}
|
||||
|
||||
.zan-cell__bd {
|
||||
flex: 1;
|
||||
}
|
||||
@ -49,8 +53,7 @@
|
||||
padding: 12px 15px 12px 0;
|
||||
}
|
||||
|
||||
.zan-cell--last-child::after,
|
||||
.zan-cell:last-child::after {
|
||||
.zan-cell.last-cell::after {
|
||||
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