blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

checkbox component

Browse Source
This commit is contained in:
cookfront 2017-03-01 11:31:52 +08:00
parent c2a46edeae
commit d4950678e6
5 changed files with 181 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
docs/examples-docs/checkbox.md
View File

@ -1 +1,131 @@
## Checkbox组件
## Checkbox组件
### 基础用法
```html
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
<script>
export default {
data() {
return {
checkbox1: true
};
}
};
</script>
```
### 禁用状态
```html
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
<script>
export default {
data() {
return {
checkbox2: true
};
}
};
</script>
```
### Checkbox组
```html
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<script>
export default {
data() {
return {
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
},
watch: {
result(val) {
console.log(val);
}
}
};
</script>
```
### 禁用Checkbox组
```html
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<script>
export default {
data() {
return {
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
}
};
</script>
```
### 与Cell组件一起使用
```html
<zan-checkbox-group v-model="result">
<zan-cell-group>
<zan-cell v-for="item in list">
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
</zan-cell>
</zan-cell-group>
</zan-checkbox-group>
<script>
export default {
data() {
return {
list: [
'a',
'b',
'c'
],
result: ['a', 'b']
};
}
};
</script>
```
### Checkbox API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
| name | 根据这个来判断radio是否选中 | Boolean | false | |
### CheckboxGroup API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
### CheckboxGroup Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |

6
docs/examples-docs/radio.md
View File

@ -96,3 +96,9 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | Boolean | false | |
### RadioGroup Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |

44
docs/examples/checkbox.vue
View File

@ -2,20 +2,32 @@
<div class="page-checkbox">
<h1 class="page-title">Checkbox</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
<div class="checkbox-demo-wrapper">
<h2 class="page-sub-title">基础用法</h2>
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
<h2 class="page-sub-title">禁用状态</h2>
<zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
<h2 class="page-sub-title">禁用状态</h2>
<zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
<h2 class="page-sub-title">Checkbox组</h2>
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<h2 class="page-sub-title">禁用Checkbox组</h2>
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<h2 class="page-sub-title">与Cell组件一起使用</h2>
</div>
<h2 class="page-sub-title">Checkbox组</h2>
<zan-checkbox-group v-model="result">
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
</zan-checkbox-group>
<h2 class="page-sub-title">禁用Checkbox组</h2>
<zan-checkbox-group v-model="result" disabled>
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
<zan-cell-group>
<zan-cell v-for="item in list">
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
</zan-cell>
</zan-cell-group>
</zan-checkbox-group>
</div>
</template>
@ -42,3 +54,13 @@ export default {
}
};
</script>
<style>
.checkbox-demo-wrapper {
padding: 0 15px;
.zan-checkbox {
margin: 10px 0;
}
}
</style>

4
docs/examples/radio.vue
View File

@ -2,7 +2,7 @@
<div class="page-radio">
<h1 class="page-title">Radio</h1>
<div class="demo-wrapper">
<div class="radio-demo-wrapper">
<h2 class="page-sub-title">基础用法</h2>
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
@ -49,7 +49,7 @@ export default {
</script>
<style>
.demo-wrapper {
.radio-demo-wrapper {
padding: 0 15px;
.zan-radio {

9
packages/checkbox/src/checkbox.vue
View File

@ -37,10 +37,16 @@ export default {
},
computed: {
/**
* `checkbox`是否在`zan-checkbox-group`中
*/
isGroup() {
return !!this.findParentByComponentName('zan-checkbox-group');
},
/**
* `checkbox`当前值
*/
currentValue: {
get() {
return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
@ -78,6 +84,9 @@ export default {
}
},
/**
* `checkbox`是否被禁用
*/
isDisabled() {
return this.isGroup && this.parentGroup
? this.parentGroup.disabled || this.disabled