blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Checkbox: 增加复选框组件 (#666)

Browse Source
This commit is contained in:
rex 2018-09-28 16:58:55 +08:00 committed by neverland
parent c71a763ad1
commit 6abbb0b316
17 changed files with 507 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/src/Preview.vue
View File

@ -44,7 +44,8 @@ const MAP = {
tabbar: 'tabbar-201808160922.png',
toast: 'toast-201808191046.png',
transition: 'transition-20180821.png',
'tree-select': 'tree-select-201808092138.png'
'tree-select': 'tree-select-201808092138.png',
checkbox: 'checkbox-20180928-1.png'
};
export default {

3
example/app.json
View File

@ -31,7 +31,8 @@
"pages/tree-select/index",
"pages/area/index",
"pages/submit-bar/index",
"pages/radio/index"
"pages/radio/index",
"pages/checkbox/index"
],
"window": {
"navigationBarBackgroundColor": "#f8f8f8",

4
example/config.js
View File

@ -71,6 +71,10 @@ export default [
{
groupName: '表单组件',
list: [
{
path: '/checkbox',
title: 'Checkbox 复选框'
},
{
path: '/field',
title: 'Field 输入框'

36
example/pages/checkbox/index.js Normal file
View File

@ -0,0 +1,36 @@
import Page from '../../common/page';
Page({
data: {
checkbox1: true,
checkbox2: true,
list: ['a', 'b', 'c'],
result: ['a', 'b'],
result2: [],
result3: [],
icon: {
normal:
'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
active:
'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
}
},
onChange(event) {
const { key } = event.currentTarget.dataset;
this.setData({ [key]: event.detail });
},
onClick(event) {
const { value } = event.currentTarget.dataset;
this.setData({
radio3: value
});
},
toggle(event) {
const { name } = event.currentTarget.dataset;
const checkbox = this.selectComponent(`.checkboxes-${name}`);
checkbox.toggle();
}
});

10
example/pages/checkbox/index.json Normal file
View File

@ -0,0 +1,10 @@
{
"navigationBarTitleText": "Checkbox 复选框",
"usingComponents": {
"demo-block": "../../components/demo-block/index",
"van-checkbox-group": "../../dist/checkbox-group/index",
"van-checkbox": "../../dist/checkbox/index",
"van-cell": "../../dist/cell/index",
"van-cell-group": "../../dist/cell-group/index"
}
}

58
example/pages/checkbox/index.wxml Normal file
View File

@ -0,0 +1,58 @@
<demo-block title="基本用法">
<van-checkbox value="{{ checkbox1 }}" data-key="checkbox1" bind:change="onChange" custom-class="demo-checkbox">复选框</van-checkbox>
</demo-block>
<demo-block title="禁用状态">
<van-checkbox value="{{ false }}" disabled custom-class="demo-checkbox">复选框</van-checkbox>
<van-checkbox value="{{ true }}" disabled custom-class="demo-checkbox">复选框</van-checkbox>
</demo-block>
<demo-block title="自定义图标">
<van-checkbox value="{{ checkbox2 }}" data-key="checkbox2" bind:change="onChange" use-icon-slot custom-class="demo-checkbox">
自定义图标
<image mode="widthFix" slot="icon" src="{{ checkbox2 ? icon.active : icon.normal }}" class="icon" />
</van-checkbox>
</demo-block>
<demo-block title="Checkbox 组">
<van-checkbox-group value="{{ result }}" data-key="result" bind:change="onChange">
<van-checkbox
wx:for="{{ list }}"
wx:key="{{ index }}"
name="{{ item }}"
custom-class="demo-checkbox"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block title="设置最大可选数">
<van-checkbox-group value="{{ result2 }}" data-key="result2" max="2" bind:change="onChange">
<van-checkbox
wx:for="{{ list }}"
wx:key="{{ index }}"
name="{{ item }}"
custom-class="demo-checkbox"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block title="与 Cell 组件一起使用">
<van-checkbox-group value="{{ result3 }}" data-key="result3" bind:change="onChange">
<van-cell-group >
<van-cell
wx:for="{{ list }}"
wx:key="{{ index }}"
title="复选框{{ item }}"
clickable
data-name="{{ item }}"
bind:click="toggle"
>
<van-checkbox class="checkboxes-{{ item }}" name="{{ item }}" />
</van-cell>
</van-cell-group>
</van-checkbox-group>
</demo-block>

11
example/pages/checkbox/index.wxss Normal file
View File

@ -0,0 +1,11 @@
.demo-checkbox-group {
margin: 10px 0 0 20px;
}
.demo-checkbox {
margin: 10px 0 0 20px;
}
.icon {
width: 20px;
}

6
packages/checkbox-group/index.json Normal file
View File

@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
}

0
packages/checkbox-group/index.less Normal file
View File

37
packages/checkbox-group/index.ts Normal file
View File

@ -0,0 +1,37 @@
import { VantComponent } from '../common/component';
VantComponent({
relation: {
name: 'checkbox',
type: 'descendant',
linked(target: Weapp.Component) {
const { value, disabled } = this.data;
target.setData({
value: value.indexOf(target.data.name) !== -1,
disabled: disabled || target.data.disabled
});
}
},
props: {
value: Array,
disabled: Boolean,
max: Number
},
watch: {
value(value) {
const children = this.getRelationNodes('../checkbox/index');
children.forEach(child => {
child.setData({ value: value.indexOf(child.data.name) !== -1 });
});
},
disabled(disabled: boolean) {
const children = this.getRelationNodes('../checkbox/index');
children.forEach(child => {
child.setData({ disabled: disabled || child.data.disabled });
});
}
}
});

3
packages/checkbox-group/index.wxml Normal file
View File

@ -0,0 +1,3 @@
<view class="custom-class">
<slot />
</view>

190
packages/checkbox/README.md Normal file
View File

@ -0,0 +1,190 @@
## Checkbox 复选框
### 使用指南
在 index.json 中引入组件
```json
"usingComponents": {
"van-checkbox": "path/to/vant-weapp/dist/checkbox/index",
"van-checkbox-group": "path/to/vant-weapp/dist/checkbox-group/index"
}
```
### 代码演示
#### 基础用法
通过`value`绑定 checkbox 的勾选状态
```html
<van-checkbox value="{{ checked }}" bind:change="onChange">复选框</van-checkbox>
```
#### 禁用状态
```html
<van-checkbox value="{{ checked }}" bind:change="onChange" disabled>复选框</van-checkbox>
```
#### 自定义图标
通过 icon 插槽自定义图标
```html
<van-checkbox use-icon-slot value="{{ checked }}" bind:change="onChange">
自定义图标
<image
slot="icon"
src="{{ checked ? icon.active : icon.normal }}"
>
</van-checkbox>
```
```js
Page({
data: {
checked: true,
icon: {
normal: '//img.yzcdn.cn/icon-normal.png',
active: '//img.yzcdn.cn/icon-active.png'
}
},
onChange(event) {
this.setData({
checked: event.detail
});
}
});
```
#### Checkbox 组
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`value`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
```html
<van-checkbox-group value="{{ result }}" bind:change="onChange">
<van-checkbox
wx:for="{{ list }}"
wx:key="{{ index }}"
name="{{ item }}"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group>
```
```javascript
Page({
data: {
list: ['a', 'b', 'c'],
result: ['a', 'b']
},
onChange(event) {
this.setData({
result: event.detail
});
}
});
```
#### 设置最大可选数
```html
<van-checkbox-group value="{{ result }}" bind:change="onChange" max="2">
<van-checkbox
wx:for="{{ list }}"
wx:key="{{ index }}"
name="{{ item }}"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group>
```
#### 与 Cell 组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
```html
<van-checkbox-group value="{{ result }}" bind:change="onChange">
<van-cell-group >
<van-cell
wx:for="{{ list }}"
wx:key="{{ index }}"
title="复选框 {{ item }}"
clickable
data-name="{{ item }}"
bind:click="toggle"
>
<van-checkbox class="checkboxes-{{ item }}" name="{{ item }}" />
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
```js
Page({
data: {
list: ['a', 'b', 'c'],
result: ['a', 'b']
},
onChange(event) {
this.setData({
result: event.detail
});
}
toggle(event) {
const { name } = event.currentTarget.dataset;
const checkbox = this.selectComponent(`.checkboxes-${name}`);
checkbox.toggle();
}
});
```
### Checkbox API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| name | 标识 Checkbox 名称 | `any` | - |
| value | 是否为选中状态 | `Boolean` | `false` |
| disabled | 是否禁用单选框 | `Boolean` | `false` |
| label-disabled | 是否禁用单选框内容点击 | `Boolean` | `false` |
| label-position | 文本位置，可选值为 `left` | `String` | `right` |
| shape | 形状，可选值为 `round` `square` | `String` | `round` |
| use-icon-slot | 是否使用 icon slot | `Boolean` | `false` |
### CheckboxGroup API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| value | 所有选中项的 name | `Array` | - |
| disabled | 是否禁用所有单选框 | `Boolean` | `false` |
| max | 设置最大可选数 | `Number` | `0`（无限制） |
### Checkbox Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
### CheckboxGroup Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
### Checkbox Slot
| 名称 | 说明 | slot-scope |
|-----------|-----------|-----------|
| - | 自定义文本 | - |
| icon | 自定义图标 | checked: 是否为选中状态 |
### Checkbox 方法
通过 selectComponent 可以获取到 checkbox 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| toggle | - | - | 切换选中状态 |

6
packages/checkbox/index.json Normal file
View File

@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
}

56
packages/checkbox/index.less Normal file
View File

@ -0,0 +1,56 @@
@import '../common/style/var.less';
@van-checkbox-size: 20px;
.van-checkbox {
overflow: hidden;
user-select: none;
&__icon-wrap,
&__label {
display: inline-block;
line-height: @van-checkbox-size;
vertical-align: middle;
}
&__icon {
box-sizing: border-box;
display: block;
width: @van-checkbox-size;
height: @van-checkbox-size;
border: 1px solid #aaa;
color: transparent;
font-size: 12px;
text-align: center;
&--round {
border-radius: 100%;
}
&--checked {
border-color: @green;
background-color: @green;
color: #fff;
}
&--disabled {
border-color: @border-color;
background-color: currentColor;
color: @background-color;
}
&--disabled&--checked {
border-color: @border-color;
background-color: @border-color;
}
}
&__label {
margin-left: 10px;
&--left {
margin: 0 10px 0 0;
float: left;
}
}
}

77
packages/checkbox/index.ts Normal file
View File

@ -0,0 +1,77 @@
import { VantComponent } from '../common/component';
VantComponent({
relation: {
name: 'checkbox-group',
type: 'ancestor'
},
classes: ['icon-class', 'label-class'],
props: {
name: null,
value: null,
disabled: Boolean,
labelDisabled: Boolean,
labelPosition: String,
shape: {
type: String,
value: 'round'
},
useIconSlot: Boolean
},
computed: {
iconClass(): string {
const { disabled, value, shape } = this.data;
return this.classNames('van-checkbox__icon', `van-checkbox__icon--${shape}`, {
'van-checkbox__icon--disabled': disabled,
'van-checkbox__icon--checked': value
});
}
},
methods: {
emitChange(value) {
const parent = this.getRelationNodes('../checkbox-group/index')[0];
if (parent) {
const parentValue = parent.data.value.slice();
const { name } = this.data;
if (value) {
if (parent.data.max && parentValue.length >= parent.data.max) {
return;
}
/* istanbul ignore else */
if (parentValue.indexOf(name) === -1) {
parentValue.push(name);
parent.$emit('input', parentValue);
parent.$emit('change', parentValue);
}
} else {
const index = parentValue.indexOf(name);
/* istanbul ignore else */
if (index !== -1) {
parentValue.splice(index, 1);
parent.$emit('input', parentValue);
parent.$emit('change', parentValue);
}
}
} else {
this.$emit('input', value);
this.$emit('change', value);
}
},
toggle() {
if (!this.data.disabled) {
this.emitChange(!this.data.value);
}
},
onClickLabel() {
if (!this.data.disabled && !this.data.labelDisabled) {
this.emitChange(!this.data.value);
}
}
}
});

9
packages/checkbox/index.wxml Normal file
View File

@ -0,0 +1,9 @@
<view class="van-checkbox custom-class">
<view class="van-checkbox__icon-wrap" bindtap="toggle">
<slot wx:if="{{ useIconSlot }}" name="icon" />
<van-icon class="{{ iconClass }}" custom-class="icon-class" wx:else name="success" />
</view>
<view class="van-checkbox__label van-checkbox__label--{{ labelPosition }} label-class" bindtap="onClickLabel">
<slot />
</view>
</view>

55
packages/radio-group/index.less
View File

@ -1,55 +0,0 @@
@import '../common/style/var.less';
@van-radio-size: 20px;
.van-radio {
overflow: hidden;
user-select: none;
&__input,
&__label {
display: inline-block;
vertical-align: middle;
}
&__input {
height: 1em;
position: relative;
font-size: @van-radio-size;
}
&__control {
z-index: 1;
position: absolute;
top: 0;
left: 0;
opacity: 0;
margin: 0;
width: 100%;
height: 100%;
}
&__label {
line-height: @van-radio-size;
margin-left: 10px;
&--left {
float: left;
margin: 0 10px 0 0;
}
}
&__icon {
width: 1em;
pointer-events: none;
&--disabled {
color: @gray-light;
}
&--checked {
color: @green;
}
&--check {
color: @gray-dark;
}
}
}