mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Document] add form components english document (#199)
* [Document] add english document of Checkbox * [Document] add english document of Field * [Document] add english document of NumberKeyboard * [bugfix] NumberKeyboard should not dispaly title when title is empty * [Document] add english document of PasswordInput * [Document] add english document of Radio * [document] add english document of Switch * [bugfix] remove redundent styles in english document * [Document] fix details * fix Switch test cases
This commit is contained in:
neverland
GitHub
parent
47576ec47c
commit
9084a662c3
@ -1,13 +1,13 @@
|
||||
## Changelog
|
||||
|
||||
## [v0.9.12](https://github.com/youzan/vant/tree/v0.9.12)
|
||||
### [0.9.12](https://github.com/youzan/vant/tree/v0.9.12)
|
||||
`2017-10-11`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- fix Search style bug [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
|
||||
### [0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
|
||||
`2017-10-11`
|
||||
|
||||
**Improvements**
|
||||
@ -18,7 +18,7 @@
|
||||
- fix Filed textarea wrong height when display none [\#188](https://github.com/youzan/vant/pull/188) [@chenjiahan](https://github.com/chenjiahan)
|
||||
- fix compile error in windows [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
## [v0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
|
||||
### [0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
|
||||
`2017-10-09`
|
||||
|
||||
**Improvements**
|
||||
|
||||
139
docs/examples-docs/en-US/checkbox.md
Normal file
139
docs/examples-docs/en-US/checkbox.md
Normal file
@ -0,0 +1,139 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Checkbox
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-checkbox v-model="checkbox1">Checkbox 1</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disabled
|
||||
|
||||
:::demo Disabled
|
||||
```html
|
||||
<van-checkbox v-model="checkbox2" disabled>Checkbox 2</van-checkbox>
|
||||
```
|
||||
:::
|
||||
|
||||
#### CheckboxGroup
|
||||
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
|
||||
|
||||
:::demo CheckboxGroup
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
Checkbox {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Inside a Cell
|
||||
|
||||
:::demo Inside a Cell
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<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>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | Checkbox name | `Boolean` | `false` | - |
|
||||
| disabled | Diable checkbox | `Boolean` | `false` | - |
|
||||
| shape | Checkbox shape | `String` | `round` | `square` |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | Disable all checkboxes | `Boolean` | `false` | - |
|
||||
|
||||
### Checkbox Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when value changed | current value |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when value changed | current value |
|
||||
126
docs/examples-docs/en-US/field.md
Normal file
126
docs/examples-docs/en-US/field.md
Normal file
@ -0,0 +1,126 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
password: '',
|
||||
username: '',
|
||||
message: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Field
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Field } from 'vant';
|
||||
|
||||
Vue.component(Field.name, Field);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
The value of filed is bound with v-model.
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="Username"></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Custom Type
|
||||
Use `type` prop to custom diffrent type fileds.
|
||||
|
||||
:::demo Custom Type
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="Username"
|
||||
icon="clear"
|
||||
placeholder="Username"
|
||||
required
|
||||
@click-icon="username = ''"
|
||||
>
|
||||
</van-field>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disabled
|
||||
|
||||
:::demo Disabled
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field value="Disabled" label="Username" disabled></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Error Info
|
||||
|
||||
:::demo Error Info
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="Username" placeholder="Username" error></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Auto resize
|
||||
Textarea Filed can be auto resize when has `autosize` prop
|
||||
|
||||
:::demo Auto resize
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="Message"
|
||||
type="textarea"
|
||||
placeholder="Message"
|
||||
rows="1"
|
||||
autosize
|
||||
>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | Filed type | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
||||
| value | Filed value | `String` | - | - |
|
||||
| label | Filed label | `String` | - | - |
|
||||
| disabled | Disable field | `Boolean` | `false` | - |
|
||||
| error | Whether to show error info | `Boolean` | `false` | - |
|
||||
| autosize | Textarea auto resize | `Boolean` | `false` | - |
|
||||
| icon | Right side Icon name | `String` | - | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | Triggered when filed get focused | - |
|
||||
| blur | Triggered when blur filed | - |
|
||||
| click-icon | Triggered when click the icon of filed | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| icon | Custom icon |
|
||||
@ -1,27 +1,3 @@
|
||||
<style>
|
||||
.demo-layout {
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.van-col {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
background-clip: content-box;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #66c6f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout
|
||||
|
||||
Quickly and easily create layouts with `van-row` and `van-col`
|
||||
@ -36,7 +12,7 @@ Vue.component(Col.name, Col);
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic
|
||||
#### Basic Usage
|
||||
|
||||
Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
|
||||
|
||||
@ -77,14 +53,14 @@ Set grid spacing using `gutter` attribute. The default value is 0
|
||||
### API
|
||||
|
||||
#### Row
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | grid spacing（px） | `String | Number` | - | - |
|
||||
| prefix | className prefix | `String` | `van` | - |
|
||||
|
||||
#### Column
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | number of column the grid spans | `String | Number` | - | - |
|
||||
| span | number of column the grid spans | `String | Number` | - | - |
|
||||
| offset | number of spacing on the left side of the grid | `String | Number` | - | - |
|
||||
| prefix | className prefix | `String` | `van` | - |
|
||||
|
||||
93
docs/examples-docs/en-US/number-keyboard.md
Normal file
93
docs/examples-docs/en-US/number-keyboard.md
Normal file
@ -0,0 +1,93 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showKeyboard: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast('Input: ' + value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('Delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## NumberKeyboard
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { NumberKeyboard } from 'vant';
|
||||
|
||||
Vue.component(NumberKeyboard.name, NumberKeyboard);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-button @touchstart.native.stop="showKeyboard = true">
|
||||
ShowKeyboard
|
||||
</van-button>
|
||||
|
||||
<van-button @touchstart.native.stop="showKeyboard = false">
|
||||
HideKeyboard
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@blur="showKeyboard = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showKeyboard: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast(value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| show | Whether to show keyboard | `Boolean` | - | - |
|
||||
| title | Keyboard title | `String` | - | - |
|
||||
| extraKey | Content of bottom left key | `String` | `''` | - |
|
||||
| zIndex | Keyboard z-index | `Number` | `100` | - |
|
||||
| transition | Whether to show transition animation | `Boolean` | `true` | - |
|
||||
| showDeleteKey | Whether to show delete button | `Boolean` | `true` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| input | Triggered when keydown | key: Content of the key |
|
||||
| delete | Triggered when press delete key | - |
|
||||
| blur | Triggered when blur keyboard | - |
|
||||
| show | Triggered when keyboard is fully displayed. | - |
|
||||
| hide | Triggered when keyboard is fully hidden. | - |
|
||||
88
docs/examples-docs/en-US/password-input.md
Normal file
88
docs/examples-docs/en-US/password-input.md
Normal file
@ -0,0 +1,88 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showKeyboard: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## PasswordInput
|
||||
The PasswordInput component is usually used with [NumberKeyboard](#/en-US/component/number-keyboard) Component.
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { PasswordInput, NumberKeyBoard } from 'vant';
|
||||
|
||||
Vue.component(PasswordInput.name, PasswordInput);
|
||||
Vue.component(NumberKeyBoard.name, NumberKeyBoard);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="Some tips"
|
||||
@focus="showKeyboard = true"
|
||||
></van-password-input>
|
||||
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
></van-number-keyboard>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showKeyboard: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | Password value | `String` | `''` | - |
|
||||
| length | Maxlength of password | `Number` | `6` | - |
|
||||
| info | Bottom info | `String` | - | - |
|
||||
| errorInfo | Bottom error info | `String` | - | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | Triggered when input get focused | - |
|
||||
@ -10,7 +10,7 @@ npm i vant -S
|
||||
|
||||
### Usage
|
||||
|
||||
#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
|
||||
#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
|
||||
```bash
|
||||
# Install babel-plugin-import
|
||||
npm i babel-plugin-import -D
|
||||
|
||||
131
docs/examples-docs/en-US/radio.md
Normal file
131
docs/examples-docs/en-US/radio.md
Normal file
@ -0,0 +1,131 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Radio
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Radio } from 'vant';
|
||||
|
||||
Vue.component(Radio.name, Radio);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Use `v-model` to bind check status of radio. The value will be set to the name of radio when radio get checked.
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio1">Radio 1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">Radio 2</van-radio>
|
||||
</div>
|
||||
```
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disabled
|
||||
|
||||
:::demo Disabled
|
||||
```html
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio2" disabled>Disabled</van-radio>
|
||||
<van-radio name="2" v-model="radio2" disabled>Disabled and checked</van-radio>
|
||||
</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio2: '2'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### RadioGroup
|
||||
When Radios are inside a RadioGroup, the checked radio's name is bound with CheckboxGroup by `v-model`.
|
||||
|
||||
:::demo RadioGroup
|
||||
```html
|
||||
<div class="van-radios">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-radio name="1">Radio 1</van-radio>
|
||||
<van-radio name="2">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio3: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### With Cell
|
||||
|
||||
:::demo With Cell
|
||||
```html
|
||||
<van-radio-group v-model="radio4">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio4: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | Diable radio | `Boolean` | `false` | - |
|
||||
| name | Radio name | `Boolean` | `false` | - |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | Diable all radios | `Boolean` | `false` | - |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when value changed | current value |
|
||||
112
docs/examples-docs/en-US/switch.md
Normal file
112
docs/examples-docs/en-US/switch.md
Normal file
@ -0,0 +1,112 @@
|
||||
<script>
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true,
|
||||
checked2: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
title: 'Confirm',
|
||||
confirmButtonText: 'ok',
|
||||
cancelButtonText: 'cancel',
|
||||
message: 'Are you sure to toggle switch?'
|
||||
}).then(() => {
|
||||
this.checked2 = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Switch
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Switch } from 'vant';
|
||||
|
||||
Vue.component(Switch.name, Switch);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-switch v-model="checked" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disabled
|
||||
|
||||
:::demo Disabled
|
||||
```html
|
||||
<van-switch v-model="checked" disabled />
|
||||
```
|
||||
:::
|
||||
|
||||
#### Loading
|
||||
|
||||
|
||||
:::demo Loading
|
||||
```html
|
||||
<van-switch v-model="checked" loading />
|
||||
```
|
||||
:::
|
||||
|
||||
#### Advanced usage
|
||||
:::demo Advanced usage
|
||||
```html
|
||||
<van-switch :value="checked2" @input="onInput" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked2: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure to toggle switch?'
|
||||
}).then(() => {
|
||||
this.checked2 = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | Check status of Switch | `Boolean` | `false` | - |
|
||||
| loading | Whether to show loading icon | `Boolean` | `false` | - |
|
||||
| disabled | Disable switch | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when check status changed | checked: is switch checked |
|
||||
@ -1,13 +1,13 @@
|
||||
## 更新日志
|
||||
|
||||
## [v0.9.12](https://github.com/youzan/vant/tree/v0.9.12)
|
||||
### [0.9.12](https://github.com/youzan/vant/tree/v0.9.12)
|
||||
`2017-10-11`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 修复 Search 样式问题 [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
|
||||
### [0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
|
||||
`2017-10-11`
|
||||
|
||||
**Improvements**
|
||||
@ -19,7 +19,7 @@
|
||||
- 修复 windows 下项目编译失败的问题 [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
|
||||
|
||||
|
||||
## [v0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
|
||||
### [0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
|
||||
`2017-10-09`
|
||||
|
||||
**Improvements**
|
||||
|
||||
@ -24,12 +24,6 @@ export default {
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -38,9 +32,10 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Checkbox } from 'vant';
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
@ -50,7 +45,7 @@ Vue.component(Checkbox.name, Checkbox);
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
|
||||
<van-checkbox v-model="checkbox1">复选框 1</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -66,29 +61,17 @@ export default {
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Checkbox`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
<van-checkbox v-model="checkbox2" disabled>复选框 2</van-checkbox>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Checkbox组
|
||||
#### Checkbox 组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，值通过`v-model`绑定在`van-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
|
||||
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
|
||||
|
||||
:::demo Checkbox组
|
||||
:::demo Checkbox 组
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
@ -96,7 +79,7 @@ export default {
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
复选框{{ item }}
|
||||
复选框 {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
@ -108,20 +91,14 @@ export default {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 与Cell组件一起使用
|
||||
#### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
此时你需要再引入`Cell`和`CellGroup`组件
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
@ -148,7 +125,7 @@ export default {
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
@ -156,18 +133,18 @@ export default {
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
|
||||
|
||||
### Checkbox Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
@ -10,7 +10,7 @@ export default {
|
||||
return {
|
||||
value: '',
|
||||
password: '',
|
||||
username: 'zhangmin',
|
||||
username: '',
|
||||
message: ''
|
||||
};
|
||||
}
|
||||
@ -19,7 +19,7 @@ export default {
|
||||
|
||||
## Field 输入框
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
`input`或`textarea`的输入框。
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
@ -109,7 +109,7 @@ Vue.component(Field.name, Field);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
||||
| value | 输入框的值 | `String` | - | - |
|
||||
@ -121,7 +121,7 @@ Vue.component(Field.name, Field);
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
| blur | 输入框失焦时触发 | - |
|
||||
@ -129,6 +129,6 @@ Vue.component(Field.name, Field);
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon |
|
||||
|
||||
@ -77,13 +77,13 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|
||||
### API
|
||||
|
||||
#### Row
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | - |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
||||
|
||||
@ -84,7 +84,7 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| show | 是否显示键盘 | `Boolean` | - | - |
|
||||
| title | 键盘标题 | `String` | `安全输入键盘` | - |
|
||||
| title | 键盘标题 | `String` | - | - |
|
||||
| extraKey | 左下角按键内容 | `String` | `''` | - |
|
||||
| zIndex | 键盘 z-index | `Number` | `100` | - |
|
||||
| transition | 是否开启过场动画 | `Boolean` | `true` | - |
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| input | 点击按键时触发 | key: 按键内容 |
|
||||
| delete | 点击删除键时触发 | - |
|
||||
|
||||
@ -77,12 +77,12 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 密码值 | `String` | `''` | - |
|
||||
| length | 密码长度 | `Number` | `6` | - |
|
||||
| length | 密码最大长度 | `Number` | `6` | - |
|
||||
| info | 输入框下方提示 | `String` | - | - |
|
||||
| errorInfo | 输入框下方错误提示 | `String` | - | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
|
||||
@ -41,8 +41,8 @@ Vue.component(Radio.name, Radio);
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio1">单选框1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">单选框2</van-radio>
|
||||
<van-radio name="1" v-model="radio1">单选框 1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">单选框 2</van-radio>
|
||||
</div>
|
||||
```
|
||||
```javascript
|
||||
@ -87,8 +87,8 @@ export default {
|
||||
```html
|
||||
<div class="van-radios">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-radio name="1">单选框1</van-radio>
|
||||
<van-radio name="2">单选框2</van-radio>
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
```
|
||||
@ -104,11 +104,11 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 与Cell组件一起使用
|
||||
#### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
:::demo 与 Cell 组件一起使用
|
||||
```html
|
||||
<van-radio-group v-model="radio4">
|
||||
<van-cell-group>
|
||||
@ -131,19 +131,19 @@ export default {
|
||||
|
||||
### Radio API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `Boolean` | `false` | |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
| name | 根据这个来判断 radio 是否选中 | `Boolean` | `false` | - |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
@ -1,17 +1,8 @@
|
||||
<style>
|
||||
.demo-switch {
|
||||
.van-switch {
|
||||
float: left;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,21 +12,19 @@ import Dialog from 'packages/dialog';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState1: true,
|
||||
switchState2: false,
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
checked: true,
|
||||
checked2: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
const state = newState ? '打开' : '关闭';
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {});
|
||||
message: '是否切换开关？'
|
||||
}).then(() => {
|
||||
this.checked2 = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -56,107 +45,72 @@ Vue.component(Switch.name, Switch);
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-switch v-model="checked" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState1: true,
|
||||
switchState2: false
|
||||
checked: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性为`true`，此时开关不可点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
|
||||
<div class="demo-switch__text">打开</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
|
||||
<div class="demo-switch__text">关闭</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
}
|
||||
};
|
||||
<van-switch v-model="checked" disabled />
|
||||
```
|
||||
:::
|
||||
|
||||
#### loading状态
|
||||
|
||||
设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
|
||||
|
||||
:::demo loading状态
|
||||
#### 加载状态
|
||||
:::demo 加载状态
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" loading></van-switch>
|
||||
<div class="demo-switch__text">打开</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" loading></van-switch>
|
||||
<div class="demo-switch__text">关闭</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-switch v-model="checked" loading />
|
||||
```
|
||||
:::
|
||||
|
||||
```javascript
|
||||
#### 高级用法
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-switch :value="checked2" @input="onInput" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
checked2: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否切换开关？'
|
||||
}).then(() => {
|
||||
this.checked2 = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关状态 | `Boolean` | `false` | `true`, `false` |
|
||||
| loading | loading状态 | `Boolean` | `false` | `true`, `false` |
|
||||
| disabled | 禁用状态 | `Boolean` | `false` | `true`, `false` |
|
||||
| onChange | 开关状态切换回调(默认则改变开关状态) | `Function` | - | - |
|
||||
| v-model | 开关选中状态 | `Boolean` | `false` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 开关状态切换回调 | checked: 是否选中开关 |
|
||||
|
||||
@ -47,15 +47,14 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `dataUrl`, `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | |
|
||||
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function` | | |
|
||||
| after-read | 文件读完之后回调此函数，参数为{file:'选择的文件',content:'读的内容'} | `Function` | | |
|
||||
| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
|
||||
| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
|
||||
| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -305,7 +305,32 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
"groupName": "Form",
|
||||
"list": []
|
||||
"list": [
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"title": "Checkbox"
|
||||
},
|
||||
{
|
||||
"path": "/field",
|
||||
"title": "Field"
|
||||
},
|
||||
{
|
||||
"path": "/number-keyboard",
|
||||
"title": "NumberKeyboard"
|
||||
},
|
||||
{
|
||||
"path": "/password-input",
|
||||
"title": "PasswordInput"
|
||||
},
|
||||
{
|
||||
"path": "/radio",
|
||||
"title": "Radio"
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch"
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
12
package.json
12
package.json
@ -104,20 +104,20 @@
|
||||
"run-sequence": "^2.1.0",
|
||||
"sinon": "^2.4.1",
|
||||
"sinon-chai": "^2.12.0",
|
||||
"style-loader": "^0.18.2",
|
||||
"style-loader": "^0.19.0",
|
||||
"uppercamelcase": "^3.0.0",
|
||||
"url-loader": "^0.5.9",
|
||||
"url-loader": "^0.6.2",
|
||||
"vue": "^2.4.2",
|
||||
"vue-loader": "^13.0.4",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-markdown-loader": "^2.1.0",
|
||||
"vue-router": "^2.7.0",
|
||||
"vue-router": "^3.0.0",
|
||||
"vue-sfc-compiler": "^0.0.2",
|
||||
"vue-style-loader": "^3.0.0",
|
||||
"vue-template-compiler": "^2.4.2",
|
||||
"webpack": "^3.5.5",
|
||||
"webpack": "^3.7.1",
|
||||
"webpack-bundle-analyzer": "^2.9.0",
|
||||
"webpack-dev-server": "^2.7.1",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"zan-doc": "^0.3.5"
|
||||
"zan-doc": "^0.3.6"
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
@touchcancel="blurKey"
|
||||
@animationend="onAnimationEnd"
|
||||
>
|
||||
<div class="van-number-keyboard__title van-hairline--top">
|
||||
<div class="van-number-keyboard__title van-hairline--top" v-if="title">
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<i
|
||||
@ -36,10 +36,7 @@ export default {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '安全输入键盘'
|
||||
},
|
||||
title: String,
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 100
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-switch" :class="[`van-switch--${checked ? 'on' : 'off'}`, { 'van-switch--disabled': disabled }]" @click="toggleState">
|
||||
<div class="van-switch" :class="[`van-switch--${value ? 'on' : 'off'}`, { 'van-switch--disabled': disabled }]" @click="toggleState">
|
||||
<div class="van-switch__node van-hairline-surround">
|
||||
<van-loading v-if="loading" class="van-switch__loading" />
|
||||
</div>
|
||||
@ -12,39 +12,22 @@ import Loading from '../loading';
|
||||
|
||||
export default {
|
||||
name: 'van-switch',
|
||||
|
||||
components: {
|
||||
[Loading.name]: Loading
|
||||
},
|
||||
|
||||
props: {
|
||||
value: Boolean,
|
||||
disabled: Boolean,
|
||||
loading: Boolean,
|
||||
onChange: Function
|
||||
disabled: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked: this.value
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
checked(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
|
||||
value(val) {
|
||||
this.checked = val;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/*
|
||||
* 开关状态交互。
|
||||
*/
|
||||
toggleState: function() {
|
||||
if (this.disabled || this.loading) return;
|
||||
if (this.onChange) {
|
||||
this.onChange(!this.checked);
|
||||
} else {
|
||||
this.checked = !this.checked;
|
||||
toggleState() {
|
||||
if (!this.disabled && !this.loading) {
|
||||
this.$emit('input', !this.value);
|
||||
this.$emit('change', !this.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import Switch from 'packages/switch';
|
||||
import Vue from 'vue';
|
||||
import VanLoading from 'packages/loading';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
@ -88,43 +87,12 @@ describe('Switch', () => {
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
wrapper.trigger('click');
|
||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||
});
|
||||
|
||||
it('click should call callback function', () => {
|
||||
const stub = sinon.stub();
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
value: false,
|
||||
onChange: stub
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
wrapper.trigger('click');
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
expect(stub.calledOnce).to.be.true;
|
||||
expect(stub.calledWith(true));
|
||||
});
|
||||
|
||||
it('toggle switch value from v-model', function(done) {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
wrapper.vm.value = true;
|
||||
wrapper.update();
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
53
yarn.lock
53
yarn.lock
@ -4857,11 +4857,7 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.16,
|
||||
dependencies:
|
||||
mime-db "~1.30.0"
|
||||
|
||||
mime@1.3.x:
|
||||
version "1.3.6"
|
||||
resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
|
||||
|
||||
mime@1.4.1, mime@^1.3.4:
|
||||
mime@1.4.1, mime@^1.3.4, mime@^1.4.1:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
|
||||
|
||||
@ -7016,9 +7012,9 @@ strip-json-comments@~2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
||||
|
||||
style-loader@^0.18.2:
|
||||
version "0.18.2"
|
||||
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
|
||||
style-loader@^0.19.0:
|
||||
version "0.19.0"
|
||||
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
|
||||
dependencies:
|
||||
loader-utils "^1.0.2"
|
||||
schema-utils "^0.3.0"
|
||||
@ -7362,12 +7358,13 @@ uppercamelcase@^3.0.0:
|
||||
dependencies:
|
||||
camelcase "^4.1.0"
|
||||
|
||||
url-loader@^0.5.9:
|
||||
version "0.5.9"
|
||||
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"
|
||||
url-loader@^0.6.2:
|
||||
version "0.6.2"
|
||||
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
|
||||
dependencies:
|
||||
loader-utils "^1.0.2"
|
||||
mime "1.3.x"
|
||||
mime "^1.4.1"
|
||||
schema-utils "^0.3.0"
|
||||
|
||||
url-parse@1.0.x:
|
||||
version "1.0.5"
|
||||
@ -7528,17 +7525,17 @@ vue-add-globals@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-add-globals/-/vue-add-globals-1.0.1.tgz#151f241426e70cbc790a1f31bb0f4435d7575efc"
|
||||
|
||||
vue-hot-reload-api@^2.1.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.1.tgz#1ba6712166182fd651753804b9d8d8d02d855579"
|
||||
vue-hot-reload-api@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.0.tgz#9a21b35ced3634434a43ee80efb7350ea8fb206d"
|
||||
|
||||
vue-lazyload@^1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.1.3.tgz#527a1e3e6ba6509fe27326d34f0ab9687c9a1e95"
|
||||
|
||||
vue-loader@^13.0.4:
|
||||
version "13.2.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.2.1.tgz#0c6cba3154d2b325d17dde2c0be52c34b888bc6d"
|
||||
vue-loader@^13.3.0:
|
||||
version "13.3.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.3.0.tgz#3bf837d490ba5dea6fc07e0835ffa6c688c8af33"
|
||||
dependencies:
|
||||
consolidate "^0.14.0"
|
||||
hash-sum "^1.0.2"
|
||||
@ -7550,7 +7547,7 @@ vue-loader@^13.0.4:
|
||||
prettier "^1.7.0"
|
||||
resolve "^1.4.0"
|
||||
source-map "^0.6.1"
|
||||
vue-hot-reload-api "^2.1.0"
|
||||
vue-hot-reload-api "^2.2.0"
|
||||
vue-style-loader "^3.0.0"
|
||||
vue-template-es2015-compiler "^1.6.0"
|
||||
|
||||
@ -7563,9 +7560,9 @@ vue-markdown-loader@^2.1.0:
|
||||
loader-utils "^0.2.15"
|
||||
markdown-it "^6.0.5"
|
||||
|
||||
vue-router@^2.7.0:
|
||||
version "2.7.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.7.0.tgz#16d424493aa51c3c8cce8b7c7210ea4c3a89aff1"
|
||||
vue-router@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.0.tgz#458092ad5d8e3b8d26661cfbcbf46c120f8ea1ae"
|
||||
|
||||
vue-sfc-compiler@^0.0.2:
|
||||
version "0.0.2"
|
||||
@ -7689,9 +7686,9 @@ webpack-sources@^1.0.1:
|
||||
source-list-map "^2.0.0"
|
||||
source-map "~0.5.3"
|
||||
|
||||
webpack@^3.5.5:
|
||||
version "3.6.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.6.0.tgz#a89a929fbee205d35a4fa2cc487be9cbec8898bc"
|
||||
webpack@^3.7.1:
|
||||
version "3.7.1"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.7.1.tgz#6046b5c415ff7df7a0dc54c5b6b86098e8b952da"
|
||||
dependencies:
|
||||
acorn "^5.0.0"
|
||||
acorn-dynamic-import "^2.0.0"
|
||||
@ -7913,9 +7910,9 @@ yeast@0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||
|
||||
zan-doc@^0.3.5:
|
||||
version "0.3.5"
|
||||
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.5.tgz#f0aa9cd3dcca524a58acd606d34dd17d223f4560"
|
||||
zan-doc@^0.3.6:
|
||||
version "0.3.6"
|
||||
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.6.tgz#fd21ebde256898c5e057c9d169c848666bf41420"
|
||||
dependencies:
|
||||
cheerio "0.22.0"
|
||||
decamelize "^1.2.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user