ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 02:31:21 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[improvement] rename packages dir to src (#3659)

Browse Source
This commit is contained in:
neverland
2019-06-27 11:25:57 +08:00
committed by GitHub
parent 8489918dca
commit 75c79b7044
619 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/checkbox/demo/index.vue Normal file
View File

@@ -0,0 +1,154 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox>
</demo-block>
<demo-block :title="$t('disabled')">
<van-checkbox
:value="false"
disabled
>
{{ $t('checkbox') }}
</van-checkbox>
<van-checkbox
:value="true"
disabled
>
{{ $t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customColor')">
<van-checkbox
v-model="checkbox2"
checked-color="#07c160"
>
{{ $t('customColor') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customIcon')">
<van-checkbox v-model="checkbox3">
{{ $t('customIcon') }}
<template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive">
</template>
</van-checkbox>
</demo-block>
<demo-block :title="$t('title3')">
<van-checkbox-group v-model="result">
<van-checkbox
v-for="(item, index) in list"
:key="index"
:name="item"
>
{{ $t('checkbox') }} {{ item }}
</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block :title="$t('title4')">
<van-checkbox-group
v-model="result2"
:max="2"
>
<van-checkbox
v-for="(item, index) in list"
:key="index"
:name="item"
>
{{ $t('checkbox') }} {{ item }}
</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block :title="$t('title5')">
<van-checkbox-group v-model="result3">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
clickable
:key="index"
:title="$t('checkbox') + item"
@click="toggle(index)"
>
<van-checkbox
ref="checkboxes"
slot="right-icon"
:name="item"
/>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
checkbox: '复选框',
customIcon: '自定义图标',
customColor: '自定义颜色',
title3: '复选框组',
title4: '设置最大可选数',
title5: '搭配单元格组件使用'
},
'en-US': {
checkbox: 'Checkbox',
customIcon: 'Custom Icon',
customColor: 'Custom Color',
title3: 'Checkbox Group',
title4: 'Maximum amount of checked options',
title5: 'Inside a Cell'
}
},
data() {
return {
checkbox1: true,
checkbox2: true,
checkbox3: true,
list: [
'a',
'b',
'c'
],
result: ['a', 'b'],
result2: [],
result3: [],
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
};
},
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
}
}
};
</script>
<style lang="less">
.demo-checkbox {
.van-checkbox {
margin: 10px 0 0 20px;
}
.van-cell {
.van-checkbox {
margin: 0;
}
}
img {
height: 20px;
}
}
</style>

189
src/checkbox/en-US.md Normal file
View File

@@ -0,0 +1,189 @@
# Checkbox
### Install
``` javascript
import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox).use(CheckboxGroup);
```
## Usage
### Basic Usage
```html
<van-checkbox v-model="checked">Checkbox</van-checkbox>
```
```javascript
export default {
data() {
return {
checked: true
};
}
};
```
### Disabled
```html
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
```
### Custom Color
```html
<van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox>
```
### Custom Icon
Use icon slot to custom icon
```html
<van-checkbox v-model="checked">
Custom Icon
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
>
</van-checkbox>
```
```js
export default {
data() {
checked: true,
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}
}
```
### Checkbox Group
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
```html
<van-checkbox-group v-model="result">
<van-checkbox
v-for="(item, index) in list"
:key="item"
:name="item"
>
Checkbox {{ item }}
</van-checkbox>
</van-checkbox-group>
```
```javascript
export default {
data() {
return {
list: ['a', 'b', 'c'],
result: ['a', 'b']
};
}
};
```
### 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"
clickable
:key="item"
:title="`Checkbox ${item}`"
@click="toggle(index)"
>
<van-checkbox
:name="item"
ref="checkboxes"
slot="right-icon"
/>
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
```js
export default {
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
}
}
}
```
## API
### Checkbox Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| name | Checkbox name | `any` | - |
| shape | Can be set to `square` | `String` | `round` |
| v-model | Check status | `Boolean` | `false` |
| disabled | Diable checkbox | `Boolean` | `false` |
| icon-size | Icon size | `String | Number` | `20px` |
| label-disabled | Whether to disable label click | `Boolean` | `false` |
| label-position | Can be set to `left` | `String` | `right` |
| checked-color | Checked color | `String` | `#1989fa` | - |
### CheckboxGroup Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| v-model | Names of all checked checkboxes | `Array` | - |
| disabled | Disable all checkboxes | `Boolean` | `false` |
| max | Maximum amount of checked options | `Number` | `0`(Unlimited) |
### Checkbox Events
| Event | Description | Parameters |
|------|------|------|
| change | Triggered when value changed | current value |
| click | Triggered when click checkbox | event: Event |
### CheckboxGroup Events
| Event | Description | Parameters |
|------|------|------|
| change | Triggered when value changed | current value |
### Checkbox Slots
| Name | Description | slot-scope |
|------|------|------|
| default | Custom label | - |
| icon | Custom icon | checked: whether to be checked |
### Checkbox Methods
Use ref to get checkbox instance and call instance methods
| Name | Attribute | Return value | Description |
|------|------|------|------|
| toggle | - | - | Toggle check status |

85
src/checkbox/index.js Normal file
View File

@@ -0,0 +1,85 @@
import { createNamespace } from '../utils';
import { CheckboxMixin } from '../mixins/checkbox';
const [createComponent, bem] = createNamespace('checkbox');
export default createComponent({
mixins: [CheckboxMixin({
bem,
role: 'checkbox',
parent: 'vanCheckbox'
})],
computed: {
checked: {
get() {
return this.parent ? this.parent.value.indexOf(this.name) !== -1 : this.value;
},
set(val) {
if (this.parent) {
this.setParentValue(val);
} else {
this.$emit('input', val);
}
}
}
},
watch: {
value(val) {
this.$emit('change', val);
}
},
methods: {
toggle() {
const checked = !this.checked;
// When toggle method is called multiple times at the same time,
// only the last call is valid.
// This is a hack for usage inside Cell.
clearTimeout(this.toggleTask);
this.toggleTask = setTimeout(() => {
this.checked = checked;
});
},
onClickIcon() {
if (!this.isDisabled) {
this.toggle();
}
},
onClickLabel() {
if (!this.isDisabled && !this.labelDisabled) {
this.toggle();
}
},
setParentValue(val) {
const { parent } = this;
const value = parent.value.slice();
if (val) {
if (parent.max && value.length >= parent.max) {
return;
}
/* istanbul ignore else */
if (value.indexOf(this.name) === -1) {
value.push(this.name);
parent.$emit('input', value);
}
} else {
const index = value.indexOf(this.name);
/* istanbul ignore else */
if (index !== -1) {
value.splice(index, 1);
parent.$emit('input', value);
}
}
}
}
});

69
src/checkbox/index.less Normal file
View File

@@ -0,0 +1,69 @@
@import '../style/var';
.van-checkbox {
display: flex;
align-items: center;
overflow: hidden;
user-select: none;
&__icon {
flex: none;
height: 1em;
font-size: @checkbox-size;
line-height: 1em;
.van-icon {
display: block;
box-sizing: border-box;
width: 1.25em;
height: 1.25em;
color: transparent;
font-size: .8em;
line-height: inherit;
text-align: center;
border: 1px solid @checkbox-border-color;
transition: @checkbox-transition-duration;
}
&--round {
.van-icon {
border-radius: 100%;
}
}
&--checked {
.van-icon {
color: @white;
background-color: @checkbox-checked-icon-color;
border-color: @checkbox-checked-icon-color;
}
}
&--disabled {
.van-icon {
background-color: @checkbox-disabled-background-color;
border-color: @checkbox-disabled-icon-color;
}
}
&--disabled&--checked {
.van-icon {
color: @checkbox-disabled-icon-color;
}
}
}
&__label {
margin-left: @checkbox-label-margin;
color: @checkbox-label-color;
line-height: @checkbox-size;
&--left {
margin: 0 @checkbox-label-margin 0 0;
}
&--disabled {
color: @checkbox-disabled-label-color;
}
}
}

112
src/checkbox/test/__snapshots__/demo.spec.js.snap Normal file
View File

@@ -0,0 +1,112 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">复选框</span>
</div>
</div>
<div>
<div role="checkbox" tabindex="-1" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
复选框
</span>
</div>
<div role="checkbox" tabindex="-1" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
复选框
</span>
</div>
</div>
<div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
<!----></i></div><span class="van-checkbox__label">
自定义颜色
</span>
</div>
</div>
<div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-checkbox__label">
自定义图标
</span>
</div>
</div>
<div>
<div class="van-checkbox-group">
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 a
</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 b
</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 c
</span>
</div>
</div>
</div>
<div>
<div class="van-checkbox-group">
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 a
</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 b
</span>
</div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">
复选框 c
</span>
</div>
</div>
</div>
<div>
<div class="van-checkbox-group">
<div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框a</span></div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框b</span></div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>复选框c</span></div>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

15
src/checkbox/test/__snapshots__/index.spec.js.snap Normal file
View File

@@ -0,0 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`label disabled 1`] = `
<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-checkbox__label">Label</span>
</div>
`;
exports[`label-position prop 1`] = `
<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox"><span class="van-checkbox__label van-checkbox__label--left">Label</span>
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
`;

4
src/checkbox/test/demo.spec.js Normal file
View File

@@ -0,0 +1,4 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);

107
src/checkbox/test/index.spec.js Normal file
View File

@@ -0,0 +1,107 @@
import Checkbox from '..';
import CheckboxGroup from '../../checkbox-group';
import { mount, later } from '../../../test/utils';
test('switch checkbox', async () => {
const wrapper = mount(Checkbox);
wrapper.vm.$on('input', value => {
wrapper.setData({ value });
});
const icon = wrapper.find('.van-checkbox__icon');
icon.trigger('click');
await later();
icon.trigger('click');
await later();
expect(wrapper.emitted('input')).toEqual([[true], [false]]);
expect(wrapper.emitted('change')).toEqual([[true], [false]]);
});
test('disabled', () => {
const wrapper = mount(Checkbox, {
propsData: {
disabled: true
}
});
wrapper.find('.van-checkbox__icon').trigger('click');
expect(wrapper.emitted('input')).toBeFalsy();
});
test('label disabled', () => {
const wrapper = mount(Checkbox, {
scopedSlots: {
default: () => 'Label'
},
propsData: {
labelDisabled: true
}
});
wrapper.find('.van-checkbox__label').trigger('click');
expect(wrapper.emitted('input')).toBeFalsy();
expect(wrapper).toMatchSnapshot();
});
test('checkbox group', async () => {
const wrapper = mount({
template: `
<checkbox-group v-model="result" :max="2">
<checkbox v-for="item in list" :key="item" :name="item"></checkbox>
</checkbox-group>
`,
components: {
Checkbox,
CheckboxGroup
},
data() {
return {
result: [],
list: ['a', 'b', 'c']
};
}
});
const icons = wrapper.findAll('.van-checkbox__icon');
icons.at(0).trigger('click');
await later();
icons.at(1).trigger('click');
await later();
icons.at(2).trigger('click');
expect(wrapper.vm.result).toEqual(['a', 'b']);
await later();
icons.at(0).trigger('click');
await later();
expect(wrapper.vm.result).toEqual(['b']);
});
test('click event', () => {
const onClick = jest.fn();
const wrapper = mount(Checkbox, {
listeners: {
click: onClick
}
});
wrapper.trigger('click');
expect(onClick).toHaveBeenCalledTimes(1);
const icon = wrapper.find('.van-checkbox__icon');
icon.trigger('click');
expect(onClick).toHaveBeenCalledTimes(2);
});
test('label-position prop', () => {
const wrapper = mount(Checkbox, {
scopedSlots: {
default: () => 'Label'
},
propsData: {
labelPosition: 'left'
}
});
expect(wrapper).toMatchSnapshot();
});

193
src/checkbox/zh-CN.md Normal file
View File

@@ -0,0 +1,193 @@
# Checkbox 复选框
### 引入
``` javascript
import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox).use(CheckboxGroup);
```
## 代码演示
### 基础用法
通过`v-model`绑定 checkbox 的勾选状态
```html
<van-checkbox v-model="checked">复选框</van-checkbox>
```
```javascript
export default {
data() {
return {
checked: true
};
}
};
```
### 禁用状态
```html
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
```
### 自定义颜色
```html
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
```
### 自定义图标
通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态
```html
<van-checkbox v-model="checked">
自定义图标
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
>
</van-checkbox>
```
```js
export default {
data() {
checked: true,
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}
}
```
### 复选框组
与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
```html
<van-checkbox-group v-model="result">
<van-checkbox
v-for="(item, index) in list"
:key="item"
:name="item"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group>
```
```javascript
export default {
data() {
return {
list: ['a', 'b', 'c'],
result: ['a', 'b']
};
}
};
```
### 设置最大可选数
```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`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
```html
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
clickable
:key="item"
:title="`复选框 ${item}`"
@click="toggle(index)"
>
<van-checkbox
:name="item"
ref="checkboxes"
slot="right-icon"
/>
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
```js
export default {
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
}
}
}
```
## API
### Checkbox Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 标识符 | `any` | - | - |
| shape | 形状，可选值为 `square` | `String` | `round` | - |
| v-model | 是否为选中状态 | `Boolean` | `false` | - |
| disabled | 是否禁用复选框 | `Boolean` | `false` | - |
| icon-size | 图标大小，默认单位为`px` | `String | Number` | `20px` | 2.0.0 |
| label-disabled | 是否禁用复选框文本点击 | `Boolean` | `false` | - |
| label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.11 |
| checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.3 |
### CheckboxGroup Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| v-model | 所有选中项的标识符 | `Array` | - | - |
| disabled | 是否禁用所有复选框 | `Boolean` | `false` | - |
| max | 设置最大可选数，0 为无限制 | `Number` | `0` | - |
### Checkbox Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
| click | 点击复选框时触发 | event: Event |
### CheckboxGroup Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
### Checkbox Slots
| 名称 | 说明 | slot-scope |
|------|------|------|
| default | 自定义文本 | - |
| icon | 自定义图标 | checked: 是否为选中状态 |
### Checkbox 方法
通过 ref 可以获取到 checkbox 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 |
|------|------|------|------|
| toggle | - | - | 切换选中状态 |