mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Improvement] Checkbox: remove unnecessary DOM (#636)
This commit is contained in:
neverland
GitHub
parent
24a50034b6
commit
9673da4131
@ -32,7 +32,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-checkbox-group v-model="result" :max="max">
|
||||
<van-checkbox-group v-model="result2" :max="max">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
checkbox: 'Checkbox',
|
||||
title3: 'Checkbox Group',
|
||||
title4: 'Inside a Cell',
|
||||
title5: 'Configure the maximum amount of checked options'
|
||||
title5: 'Maximum amount of checked options'
|
||||
}
|
||||
},
|
||||
|
||||
@ -70,6 +70,7 @@ export default {
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
max: 2
|
||||
};
|
||||
}
|
||||
@ -85,15 +86,13 @@ export default {
|
||||
.van-cell {
|
||||
.van-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.van-checkbox__input {
|
||||
float: right;
|
||||
position: static;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
&__label {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:key="item"
|
||||
:name="item"
|
||||
>
|
||||
Checkbox {{ item }}
|
||||
@ -57,41 +57,32 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
#### Maximum amount of checked options
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="2">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:name="item"
|
||||
:key="item"
|
||||
>
|
||||
Checkbox {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
#### Inside a Cell
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-cell v-for="(item, index) in list" :key="item">
|
||||
<van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
#### Configure the maximum amount of checked options
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="max">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b'],
|
||||
max: 2
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Checkbox API
|
||||
|
||||
@ -106,7 +97,7 @@ export default {
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | Disable all checkboxes | `Boolean` | `false` | - |
|
||||
| max | the maximum amount of checked options | `Number` | `0`(Unlimited) | - |
|
||||
| max | Maximum amount of checked options | `Number` | `0`(Unlimited) | - |
|
||||
|
||||
### Checkbox Event
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ export default {
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:key="item"
|
||||
:name="item"
|
||||
>
|
||||
复选框 {{ item }}
|
||||
@ -59,6 +59,20 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
#### 设置最大可选数
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="2">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
>
|
||||
复选框 {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
#### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件
|
||||
@ -66,40 +80,13 @@ export default {
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-cell v-for="(item, index) in list" :key="item">
|
||||
<van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
#### 设置最大可选数
|
||||
|
||||
此时你需要引入`CellGroup`组件，`Cell`组件非必须
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="max">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b'],
|
||||
max: 2
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|
||||
@ -1,28 +1,23 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-checkbox"
|
||||
:class="[
|
||||
`van-checkbox--${shape}`,
|
||||
{ 'van-checkbox--disabled': isDisabled || isLimit }
|
||||
]"
|
||||
>
|
||||
<span class="van-checkbox__input">
|
||||
<input
|
||||
v-model="currentValue"
|
||||
type="checkbox"
|
||||
class="van-checkbox__control"
|
||||
:disabled="isDisabled"
|
||||
>
|
||||
<icon name="success" />
|
||||
</span>
|
||||
<span class="van-checkbox__label" @click="onClickLabel">
|
||||
<div class="van-checkbox">
|
||||
<icon
|
||||
name="success"
|
||||
class="van-checkbox__icon"
|
||||
:class="[
|
||||
`van-checkbox--${shape}`,
|
||||
{ 'van-checkbox--disabled': isDisabled },
|
||||
{ 'van-checkbox--checked': isChecked }
|
||||
]"
|
||||
@click="onClick"
|
||||
/>
|
||||
<span class="van-checkbox__label" @click="onClick">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { create } from '../utils';
|
||||
import { create, isDef } from '../utils';
|
||||
import findParent from '../mixins/find-parent';
|
||||
|
||||
export default create({
|
||||
@ -46,32 +41,38 @@ export default create({
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// whether is in van-checkbox-group
|
||||
isGroup() {
|
||||
return !!this.findParentByName('van-checkbox-group');
|
||||
},
|
||||
data() {
|
||||
this.findParentByName('van-checkbox-group');
|
||||
return {};
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentValue: {
|
||||
get() {
|
||||
return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
|
||||
return this.parentGroup
|
||||
? this.parentGroup.value.indexOf(this.name) !== -1
|
||||
: this.value;
|
||||
},
|
||||
|
||||
set(val) {
|
||||
if (this.isGroup && this.parentGroup) {
|
||||
const { parentGroup } = this;
|
||||
if (parentGroup) {
|
||||
const parentValue = this.parentGroup.value.slice();
|
||||
if (val) {
|
||||
if (parentGroup.max && parentValue.length >= parentGroup.max) {
|
||||
return;
|
||||
}
|
||||
/* istanbul ignore else */
|
||||
if (parentValue.indexOf(this.name) === -1) {
|
||||
parentValue.push(this.name);
|
||||
this.parentGroup.$emit('input', parentValue);
|
||||
parentGroup.$emit('input', parentValue);
|
||||
}
|
||||
} else {
|
||||
const index = parentValue.indexOf(this.name);
|
||||
/* istanbul ignore else */
|
||||
if (index !== -1) {
|
||||
parentValue.splice(index, 1);
|
||||
this.parentGroup.$emit('input', parentValue);
|
||||
parentGroup.$emit('input', parentValue);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@ -84,23 +85,18 @@ export default create({
|
||||
const { currentValue } = this;
|
||||
if ({}.toString.call(currentValue) === '[object Boolean]') {
|
||||
return currentValue;
|
||||
} else if (currentValue !== null && currentValue !== undefined) {
|
||||
} else if (isDef(currentValue)) {
|
||||
return currentValue === this.name;
|
||||
}
|
||||
},
|
||||
|
||||
isDisabled() {
|
||||
return (this.isGroup && this.parentGroup && this.parentGroup.disabled) || this.disabled ||
|
||||
(this.isGroup && this.parentGroup && this.parentGroup.max > 0 && this.parentGroup.max <= this.parentGroup.value.length && !this.isChecked);
|
||||
},
|
||||
|
||||
isLimit() {
|
||||
return this.isGroup && this.parentGroup && this.parentGroup.max > 0 && this.parentGroup.max <= this.parentGroup.value.length;
|
||||
return (this.parentGroup && this.parentGroup.disabled) || this.disabled;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickLabel() {
|
||||
onClick() {
|
||||
if (!this.isDisabled) {
|
||||
this.currentValue = !this.currentValue;
|
||||
}
|
||||
|
||||
@ -6,70 +6,45 @@ $van-checkbox-size: 20px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
.van-icon-success {
|
||||
color: $white;
|
||||
display: block;
|
||||
&__icon,
|
||||
&__label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: $van-checkbox-size;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 12px;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
border: 1px solid #aaa;
|
||||
width: $van-checkbox-size;
|
||||
height: $van-checkbox-size;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::before {
|
||||
margin: 0 auto;
|
||||
line-height: $van-checkbox-size;
|
||||
}
|
||||
}
|
||||
|
||||
&__input,
|
||||
&__label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&__input {
|
||||
position: relative;
|
||||
height: $van-checkbox-size;
|
||||
}
|
||||
|
||||
&__control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-left: 10px;
|
||||
line-height: $van-checkbox-size;
|
||||
}
|
||||
|
||||
&--round {
|
||||
.van-icon-success {
|
||||
border-radius: 100%;
|
||||
}
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&__control:checked + .van-icon-success {
|
||||
&--checked {
|
||||
color: #fff;
|
||||
border-color: $green;
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-icon-success {
|
||||
color: $background-color;
|
||||
border-color: $gray-light;
|
||||
background-color: currentColor;
|
||||
}
|
||||
color: $background-color;
|
||||
border-color: $gray-light;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.van-checkbox__control:checked + .van-icon-success {
|
||||
border-color: $gray-light;
|
||||
background-color: $gray-light;
|
||||
}
|
||||
&--disabled&--checked {
|
||||
border-color: $gray-light;
|
||||
background-color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -185,7 +185,7 @@ describe('Checkbox', () => {
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
expect(wrapper.hasClass('van-checkbox--disabled')).to.be.true;
|
||||
expect(wrapper.find('.van-checkbox--disabled').length).to.equal(1);
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
expect(wrapper.vm.isDisabled).to.be.true;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user