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:
parent
47576ec47c
commit
9084a662c3
@ -1,13 +1,13 @@
|
|||||||
## Changelog
|
## 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`
|
`2017-10-11`
|
||||||
|
|
||||||
**Bug Fixes**
|
**Bug Fixes**
|
||||||
|
|
||||||
- fix Search style bug [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
|
- 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`
|
`2017-10-11`
|
||||||
|
|
||||||
**Improvements**
|
**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 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)
|
- 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`
|
`2017-10-09`
|
||||||
|
|
||||||
**Improvements**
|
**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
|
## Layout
|
||||||
|
|
||||||
Quickly and easily create layouts with `van-row` and `van-col`
|
Quickly and easily create layouts with `van-row` and `van-col`
|
||||||
@ -36,7 +12,7 @@ Vue.component(Col.name, Col);
|
|||||||
|
|
||||||
### Usage
|
### 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.
|
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
|
### API
|
||||||
|
|
||||||
#### Row
|
#### Row
|
||||||
| Attribute | Description | Type | Default | Accepted Values |
|
| Attribute | Description | Type | Default | Accepted Values |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| gutter | grid spacing(px) | `String | Number` | - | - |
|
| gutter | grid spacing(px) | `String | Number` | - | - |
|
||||||
| prefix | className prefix | `String` | `van` | - |
|
| prefix | className prefix | `String` | `van` | - |
|
||||||
|
|
||||||
#### Column
|
#### 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` | - | - |
|
| offset | number of spacing on the left side of the grid | `String | Number` | - | - |
|
||||||
| prefix | className prefix | `String` | `van` | - |
|
| 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
|
### 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
|
```bash
|
||||||
# Install babel-plugin-import
|
# Install babel-plugin-import
|
||||||
npm i babel-plugin-import -D
|
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`
|
`2017-10-11`
|
||||||
|
|
||||||
**Bug Fixes**
|
**Bug Fixes**
|
||||||
|
|
||||||
- 修复 Search 样式问题 [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
|
- 修复 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`
|
`2017-10-11`
|
||||||
|
|
||||||
**Improvements**
|
**Improvements**
|
||||||
@ -19,7 +19,7 @@
|
|||||||
- 修复 windows 下项目编译失败的问题 [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
|
- 修复 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`
|
`2017-10-09`
|
||||||
|
|
||||||
**Improvements**
|
**Improvements**
|
||||||
|
@ -24,12 +24,6 @@ export default {
|
|||||||
],
|
],
|
||||||
result: ['a', 'b']
|
result: ['a', 'b']
|
||||||
};
|
};
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
result(val) {
|
|
||||||
console.log(val);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -38,9 +32,10 @@ export default {
|
|||||||
|
|
||||||
### 使用指南
|
### 使用指南
|
||||||
``` javascript
|
``` javascript
|
||||||
import { Checkbox } from 'vant';
|
import { Checkbox, CheckboxGroup } from 'vant';
|
||||||
|
|
||||||
Vue.component(Checkbox.name, Checkbox);
|
Vue.component(Checkbox.name, Checkbox);
|
||||||
|
Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||||
```
|
```
|
||||||
|
|
||||||
### 代码演示
|
### 代码演示
|
||||||
@ -50,7 +45,7 @@ Vue.component(Checkbox.name, Checkbox);
|
|||||||
|
|
||||||
:::demo 基础用法
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
|
<van-checkbox v-model="checkbox1">复选框 1</van-checkbox>
|
||||||
```
|
```
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -66,29 +61,17 @@ export default {
|
|||||||
|
|
||||||
#### 禁用状态
|
#### 禁用状态
|
||||||
|
|
||||||
设置`disabled`属性即可,此时`Checkbox`不能点击。
|
|
||||||
|
|
||||||
:::demo 禁用状态
|
:::demo 禁用状态
|
||||||
```html
|
```html
|
||||||
<van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
|
<van-checkbox v-model="checkbox2" disabled>复选框 2</van-checkbox>
|
||||||
```
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checkbox2: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
#### 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
|
```html
|
||||||
<van-checkbox-group v-model="result">
|
<van-checkbox-group v-model="result">
|
||||||
<van-checkbox
|
<van-checkbox
|
||||||
@ -96,7 +79,7 @@ export default {
|
|||||||
:key="index"
|
:key="index"
|
||||||
:name="item"
|
:name="item"
|
||||||
>
|
>
|
||||||
复选框{{ item }}
|
复选框 {{ item }}
|
||||||
</van-checkbox>
|
</van-checkbox>
|
||||||
</van-checkbox-group>
|
</van-checkbox-group>
|
||||||
```
|
```
|
||||||
@ -108,20 +91,14 @@ export default {
|
|||||||
list: ['a', 'b', 'c'],
|
list: ['a', 'b', 'c'],
|
||||||
result: ['a', 'b']
|
result: ['a', 'b']
|
||||||
};
|
};
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
result(val) {
|
|
||||||
console.log(val);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
#### 与Cell组件一起使用
|
#### 与 Cell 组件一起使用
|
||||||
|
|
||||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
此时你需要再引入`Cell`和`CellGroup`组件
|
||||||
|
|
||||||
:::demo 与Cell组件一起使用
|
:::demo 与Cell组件一起使用
|
||||||
```html
|
```html
|
||||||
@ -148,7 +125,7 @@ export default {
|
|||||||
|
|
||||||
### Checkbox API
|
### Checkbox API
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
|
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
|
||||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||||
@ -156,18 +133,18 @@ export default {
|
|||||||
|
|
||||||
### CheckboxGroup API
|
### CheckboxGroup API
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
|
| disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
|
||||||
|
|
||||||
### Checkbox Event
|
### Checkbox Event
|
||||||
|
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|-----------|-----------|-----------|
|
|-----------|-----------|-----------|
|
||||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||||
|
|
||||||
### CheckboxGroup Event
|
### CheckboxGroup Event
|
||||||
|
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|-----------|-----------|-----------|
|
|-----------|-----------|-----------|
|
||||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||||
|
@ -10,7 +10,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
value: '',
|
value: '',
|
||||||
password: '',
|
password: '',
|
||||||
username: 'zhangmin',
|
username: '',
|
||||||
message: ''
|
message: ''
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -19,7 +19,7 @@ export default {
|
|||||||
|
|
||||||
## Field 输入框
|
## Field 输入框
|
||||||
|
|
||||||
表单中`input`或`textarea`的输入框。
|
`input`或`textarea`的输入框。
|
||||||
|
|
||||||
### 使用指南
|
### 使用指南
|
||||||
``` javascript
|
``` javascript
|
||||||
@ -109,7 +109,7 @@ Vue.component(Field.name, Field);
|
|||||||
|
|
||||||
### API
|
### API
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
||||||
| value | 输入框的值 | `String` | - | - |
|
| value | 输入框的值 | `String` | - | - |
|
||||||
@ -121,7 +121,7 @@ Vue.component(Field.name, Field);
|
|||||||
|
|
||||||
### Event
|
### Event
|
||||||
|
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|-----------|-----------|-----------|
|
|-----------|-----------|-----------|
|
||||||
| focus | 输入框聚焦时触发 | - |
|
| focus | 输入框聚焦时触发 | - |
|
||||||
| blur | 输入框失焦时触发 | - |
|
| blur | 输入框失焦时触发 | - |
|
||||||
@ -129,6 +129,6 @@ Vue.component(Field.name, Field);
|
|||||||
|
|
||||||
### Slot
|
### Slot
|
||||||
|
|
||||||
| name | 描述 |
|
| name | 描述 |
|
||||||
|-----------|-----------|
|
|-----------|-----------|
|
||||||
| icon | 自定义icon |
|
| icon | 自定义icon |
|
||||||
|
@ -77,13 +77,13 @@ Layout 组件提供了`24列栅格`,通过在`Col`上添加`span`属性设置
|
|||||||
### API
|
### API
|
||||||
|
|
||||||
#### Row
|
#### Row
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| gutter | 列元素之间的间距(单位为px) | `String | Number` | - | - |
|
| gutter | 列元素之间的间距(单位为px) | `String | Number` | - | - |
|
||||||
| prefix | className 前缀 | `String` | `van` | - |
|
| prefix | className 前缀 | `String` | `van` | - |
|
||||||
|
|
||||||
#### Column
|
#### Column
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| span | 列元素宽度 | `String | Number` | - | - |
|
| span | 列元素宽度 | `String | Number` | - | - |
|
||||||
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
||||||
|
@ -84,7 +84,7 @@ export default {
|
|||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| show | 是否显示键盘 | `Boolean` | - | - |
|
| show | 是否显示键盘 | `Boolean` | - | - |
|
||||||
| title | 键盘标题 | `String` | `安全输入键盘` | - |
|
| title | 键盘标题 | `String` | - | - |
|
||||||
| extraKey | 左下角按键内容 | `String` | `''` | - |
|
| extraKey | 左下角按键内容 | `String` | `''` | - |
|
||||||
| zIndex | 键盘 z-index | `Number` | `100` | - |
|
| zIndex | 键盘 z-index | `Number` | `100` | - |
|
||||||
| transition | 是否开启过场动画 | `Boolean` | `true` | - |
|
| transition | 是否开启过场动画 | `Boolean` | `true` | - |
|
||||||
@ -92,7 +92,7 @@ export default {
|
|||||||
|
|
||||||
### Event
|
### Event
|
||||||
|
|
||||||
| 事件名 | 说明 | 参数 |
|
| 事件名 | 说明 | 参数 |
|
||||||
|-----------|-----------|-----------|
|
|-----------|-----------|-----------|
|
||||||
| input | 点击按键时触发 | key: 按键内容 |
|
| input | 点击按键时触发 | key: 按键内容 |
|
||||||
| delete | 点击删除键时触发 | - |
|
| delete | 点击删除键时触发 | - |
|
||||||
|
@ -77,12 +77,12 @@ export default {
|
|||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| value | 密码值 | `String` | `''` | - |
|
| value | 密码值 | `String` | `''` | - |
|
||||||
| length | 密码长度 | `Number` | `6` | - |
|
| length | 密码最大长度 | `Number` | `6` | - |
|
||||||
| info | 输入框下方提示 | `String` | - | - |
|
| info | 输入框下方提示 | `String` | - | - |
|
||||||
| errorInfo | 输入框下方错误提示 | `String` | - | - |
|
| errorInfo | 输入框下方错误提示 | `String` | - | - |
|
||||||
|
|
||||||
### Event
|
### Event
|
||||||
|
|
||||||
| 事件名 | 说明 | 参数 |
|
| 事件名 | 说明 | 参数 |
|
||||||
|-----------|-----------|-----------|
|
|-----------|-----------|-----------|
|
||||||
| focus | 输入框聚焦时触发 | - |
|
| focus | 输入框聚焦时触发 | - |
|
||||||
|
@ -41,8 +41,8 @@ Vue.component(Radio.name, Radio);
|
|||||||
:::demo 基础用法
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<div class="van-radios">
|
<div class="van-radios">
|
||||||
<van-radio name="1" v-model="radio1">单选框1</van-radio>
|
<van-radio name="1" v-model="radio1">单选框 1</van-radio>
|
||||||
<van-radio name="2" v-model="radio1">单选框2</van-radio>
|
<van-radio name="2" v-model="radio1">单选框 2</van-radio>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
```javascript
|
```javascript
|
||||||
@ -87,8 +87,8 @@ export default {
|
|||||||
```html
|
```html
|
||||||
<div class="van-radios">
|
<div class="van-radios">
|
||||||
<van-radio-group v-model="radio3">
|
<van-radio-group v-model="radio3">
|
||||||
<van-radio name="1">单选框1</van-radio>
|
<van-radio name="1">单选框 1</van-radio>
|
||||||
<van-radio name="2">单选框2</van-radio>
|
<van-radio name="2">单选框 2</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
@ -104,11 +104,11 @@ export default {
|
|||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
#### 与Cell组件一起使用
|
#### 与 Cell 组件一起使用
|
||||||
|
|
||||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||||
|
|
||||||
:::demo 与Cell组件一起使用
|
:::demo 与 Cell 组件一起使用
|
||||||
```html
|
```html
|
||||||
<van-radio-group v-model="radio4">
|
<van-radio-group v-model="radio4">
|
||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
@ -131,19 +131,19 @@ export default {
|
|||||||
|
|
||||||
### Radio API
|
### Radio API
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||||
| name | 根据这个来判断radio是否选中 | `Boolean` | `false` | |
|
| name | 根据这个来判断 radio 是否选中 | `Boolean` | `false` | - |
|
||||||
|
|
||||||
### RadioGroup API
|
### RadioGroup API
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | |
|
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||||
|
|
||||||
### RadioGroup Event
|
### RadioGroup Event
|
||||||
|
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|-----------|-----------|-----------|
|
|-----------|-----------|-----------|
|
||||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||||
|
@ -1,17 +1,8 @@
|
|||||||
<style>
|
<style>
|
||||||
.demo-switch {
|
.demo-switch {
|
||||||
.van-switch {
|
.van-switch {
|
||||||
float: left;
|
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 32px;
|
|
||||||
float: left;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -21,21 +12,19 @@ import Dialog from 'packages/dialog';
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
switchState1: true,
|
checked: true,
|
||||||
switchState2: false,
|
checked2: true
|
||||||
switchStateTrue: true,
|
|
||||||
switchStateFalse: false
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
updateState(newState) {
|
onInput(checked) {
|
||||||
const state = newState ? '打开' : '关闭';
|
|
||||||
Dialog.confirm({
|
Dialog.confirm({
|
||||||
title: '提醒',
|
title: '提醒',
|
||||||
message: '是否' + state + '开关?'
|
message: '是否切换开关?'
|
||||||
}).then((action) => {
|
}).then(() => {
|
||||||
this.switchState2 = newState;
|
this.checked2 = checked;
|
||||||
}, (error) => {});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -56,107 +45,72 @@ Vue.component(Switch.name, Switch);
|
|||||||
|
|
||||||
:::demo 基础用法
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<van-row>
|
<van-switch v-model="checked" />
|
||||||
<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>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
switchState1: true,
|
checked: true
|
||||||
switchState2: false
|
|
||||||
};
|
};
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateState(newState) {
|
|
||||||
const state = newState ? '打开' : '关闭';
|
|
||||||
Dialog.confirm({
|
|
||||||
title: '提醒',
|
|
||||||
message: '是否' + state + '开关?'
|
|
||||||
}).then((action) => {
|
|
||||||
this.switchState2 = newState;
|
|
||||||
}, (error) => {
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
#### 禁用状态
|
#### 禁用状态
|
||||||
|
|
||||||
设置`disabled`属性为`true`,此时开关不可点击。
|
|
||||||
|
|
||||||
:::demo 禁用状态
|
:::demo 禁用状态
|
||||||
```html
|
```html
|
||||||
<van-row>
|
<van-switch v-model="checked" disabled />
|
||||||
<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
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
#### loading状态
|
#### 加载状态
|
||||||
|
:::demo 加载状态
|
||||||
设置`loading`属性为`true`,此时开关为加载状态,一般用于点击开关时正在向后端发送请求,此时正在loading,请求成功后,结束loading。
|
|
||||||
|
|
||||||
:::demo loading状态
|
|
||||||
```html
|
```html
|
||||||
<van-row>
|
<van-switch v-model="checked" loading />
|
||||||
<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>
|
|
||||||
```
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
```javascript
|
#### 高级用法
|
||||||
|
:::demo 高级用法
|
||||||
|
```html
|
||||||
|
<van-switch :value="checked2" @input="onInput" />
|
||||||
|
```
|
||||||
|
```js
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
switchStateTrue: true,
|
checked2: true
|
||||||
switchStateFalse: false
|
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onInput(checked) {
|
||||||
|
Dialog.confirm({
|
||||||
|
title: '提醒',
|
||||||
|
message: '是否切换开关?'
|
||||||
|
}).then(() => {
|
||||||
|
this.checked2 = checked;
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
### API
|
### API
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| v-model | 开关状态 | `Boolean` | `false` | `true`, `false` |
|
| v-model | 开关选中状态 | `Boolean` | `false` | - |
|
||||||
| loading | loading状态 | `Boolean` | `false` | `true`, `false` |
|
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||||
| disabled | 禁用状态 | `Boolean` | `false` | `true`, `false` |
|
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||||
| onChange | 开关状态切换回调(默认则改变开关状态) | `Function` | - | - |
|
|
||||||
|
### Event
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 参数 |
|
||||||
|
|-----------|-----------|-----------|
|
||||||
|
| change | 开关状态切换回调 | checked: 是否选中开关 |
|
||||||
|
@ -47,15 +47,14 @@ export default {
|
|||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
### API
|
### API
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| result-type | 读取文件的方式,以base64的方式读取;以文本的方式读取 | `String` | `dataUrl` | `dataUrl`, `text` |
|
| resultType | 读取文件的方式,以base64的方式读取;以文本的方式读取 | `String` | `dataUrl` | `text` |
|
||||||
| disable | 是否禁用上传,在图片上传期间设置为true,禁止用户点击此组件上传图片 | `Boolean` | `false` | |
|
| disable | 是否禁用上传,在图片上传期间设置为true,禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
|
||||||
| before-read | 读文件之前的钩子,参数为选择的文件,若返回 false 则停止读取文件。 | `Function` | | |
|
| beforeRead | 读文件之前的钩子,参数为选择的文件,若返回 false 则停止读取文件 | `Function` | - | - |
|
||||||
| after-read | 文件读完之后回调此函数,参数为{file:'选择的文件',content:'读的内容'} | `Function` | | |
|
| afterRead | 文件读完之后回调此函数,参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
|
||||||
|
|
||||||
### Slot
|
### Slot
|
||||||
|
|
||||||
|
@ -305,7 +305,32 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"groupName": "Form",
|
"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",
|
"run-sequence": "^2.1.0",
|
||||||
"sinon": "^2.4.1",
|
"sinon": "^2.4.1",
|
||||||
"sinon-chai": "^2.12.0",
|
"sinon-chai": "^2.12.0",
|
||||||
"style-loader": "^0.18.2",
|
"style-loader": "^0.19.0",
|
||||||
"uppercamelcase": "^3.0.0",
|
"uppercamelcase": "^3.0.0",
|
||||||
"url-loader": "^0.5.9",
|
"url-loader": "^0.6.2",
|
||||||
"vue": "^2.4.2",
|
"vue": "^2.4.2",
|
||||||
"vue-loader": "^13.0.4",
|
"vue-loader": "^13.3.0",
|
||||||
"vue-markdown-loader": "^2.1.0",
|
"vue-markdown-loader": "^2.1.0",
|
||||||
"vue-router": "^2.7.0",
|
"vue-router": "^3.0.0",
|
||||||
"vue-sfc-compiler": "^0.0.2",
|
"vue-sfc-compiler": "^0.0.2",
|
||||||
"vue-style-loader": "^3.0.0",
|
"vue-style-loader": "^3.0.0",
|
||||||
"vue-template-compiler": "^2.4.2",
|
"vue-template-compiler": "^2.4.2",
|
||||||
"webpack": "^3.5.5",
|
"webpack": "^3.7.1",
|
||||||
"webpack-bundle-analyzer": "^2.9.0",
|
"webpack-bundle-analyzer": "^2.9.0",
|
||||||
"webpack-dev-server": "^2.7.1",
|
"webpack-dev-server": "^2.7.1",
|
||||||
"webpack-merge": "^4.1.0",
|
"webpack-merge": "^4.1.0",
|
||||||
"zan-doc": "^0.3.5"
|
"zan-doc": "^0.3.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
@touchcancel="blurKey"
|
@touchcancel="blurKey"
|
||||||
@animationend="onAnimationEnd"
|
@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>
|
<span>{{ title }}</span>
|
||||||
</div>
|
</div>
|
||||||
<i
|
<i
|
||||||
@ -36,10 +36,7 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
title: {
|
title: String,
|
||||||
type: String,
|
|
||||||
default: '安全输入键盘'
|
|
||||||
},
|
|
||||||
zIndex: {
|
zIndex: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 100
|
default: 100
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<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">
|
<div class="van-switch__node van-hairline-surround">
|
||||||
<van-loading v-if="loading" class="van-switch__loading" />
|
<van-loading v-if="loading" class="van-switch__loading" />
|
||||||
</div>
|
</div>
|
||||||
@ -12,39 +12,22 @@ import Loading from '../loading';
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-switch',
|
name: 'van-switch',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
[Loading.name]: Loading
|
[Loading.name]: Loading
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
value: Boolean,
|
value: Boolean,
|
||||||
disabled: Boolean,
|
|
||||||
loading: 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: {
|
methods: {
|
||||||
/*
|
toggleState() {
|
||||||
* 开关状态交互。
|
if (!this.disabled && !this.loading) {
|
||||||
*/
|
this.$emit('input', !this.value);
|
||||||
toggleState: function() {
|
this.$emit('change', !this.value);
|
||||||
if (this.disabled || this.loading) return;
|
|
||||||
if (this.onChange) {
|
|
||||||
this.onChange(!this.checked);
|
|
||||||
} else {
|
|
||||||
this.checked = !this.checked;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import Switch from 'packages/switch';
|
import Switch from 'packages/switch';
|
||||||
import Vue from 'vue';
|
|
||||||
import VanLoading from 'packages/loading';
|
import VanLoading from 'packages/loading';
|
||||||
import { mount } from 'avoriaz';
|
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;
|
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||||
wrapper.trigger('click');
|
wrapper.trigger('click');
|
||||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
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:
|
dependencies:
|
||||||
mime-db "~1.30.0"
|
mime-db "~1.30.0"
|
||||||
|
|
||||||
mime@1.3.x:
|
mime@1.4.1, mime@^1.3.4, mime@^1.4.1:
|
||||||
version "1.3.6"
|
|
||||||
resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
|
|
||||||
|
|
||||||
mime@1.4.1, mime@^1.3.4:
|
|
||||||
version "1.4.1"
|
version "1.4.1"
|
||||||
resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
|
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"
|
version "2.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
||||||
|
|
||||||
style-loader@^0.18.2:
|
style-loader@^0.19.0:
|
||||||
version "0.18.2"
|
version "0.19.0"
|
||||||
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
|
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
|
||||||
dependencies:
|
dependencies:
|
||||||
loader-utils "^1.0.2"
|
loader-utils "^1.0.2"
|
||||||
schema-utils "^0.3.0"
|
schema-utils "^0.3.0"
|
||||||
@ -7362,12 +7358,13 @@ uppercamelcase@^3.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
camelcase "^4.1.0"
|
camelcase "^4.1.0"
|
||||||
|
|
||||||
url-loader@^0.5.9:
|
url-loader@^0.6.2:
|
||||||
version "0.5.9"
|
version "0.6.2"
|
||||||
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"
|
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
|
||||||
dependencies:
|
dependencies:
|
||||||
loader-utils "^1.0.2"
|
loader-utils "^1.0.2"
|
||||||
mime "1.3.x"
|
mime "^1.4.1"
|
||||||
|
schema-utils "^0.3.0"
|
||||||
|
|
||||||
url-parse@1.0.x:
|
url-parse@1.0.x:
|
||||||
version "1.0.5"
|
version "1.0.5"
|
||||||
@ -7528,17 +7525,17 @@ vue-add-globals@^1.0.1:
|
|||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/vue-add-globals/-/vue-add-globals-1.0.1.tgz#151f241426e70cbc790a1f31bb0f4435d7575efc"
|
resolved "https://registry.yarnpkg.com/vue-add-globals/-/vue-add-globals-1.0.1.tgz#151f241426e70cbc790a1f31bb0f4435d7575efc"
|
||||||
|
|
||||||
vue-hot-reload-api@^2.1.0:
|
vue-hot-reload-api@^2.2.0:
|
||||||
version "2.1.1"
|
version "2.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.1.tgz#1ba6712166182fd651753804b9d8d8d02d855579"
|
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.0.tgz#9a21b35ced3634434a43ee80efb7350ea8fb206d"
|
||||||
|
|
||||||
vue-lazyload@^1.1.3:
|
vue-lazyload@^1.1.3:
|
||||||
version "1.1.3"
|
version "1.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.1.3.tgz#527a1e3e6ba6509fe27326d34f0ab9687c9a1e95"
|
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.1.3.tgz#527a1e3e6ba6509fe27326d34f0ab9687c9a1e95"
|
||||||
|
|
||||||
vue-loader@^13.0.4:
|
vue-loader@^13.3.0:
|
||||||
version "13.2.1"
|
version "13.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.2.1.tgz#0c6cba3154d2b325d17dde2c0be52c34b888bc6d"
|
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.3.0.tgz#3bf837d490ba5dea6fc07e0835ffa6c688c8af33"
|
||||||
dependencies:
|
dependencies:
|
||||||
consolidate "^0.14.0"
|
consolidate "^0.14.0"
|
||||||
hash-sum "^1.0.2"
|
hash-sum "^1.0.2"
|
||||||
@ -7550,7 +7547,7 @@ vue-loader@^13.0.4:
|
|||||||
prettier "^1.7.0"
|
prettier "^1.7.0"
|
||||||
resolve "^1.4.0"
|
resolve "^1.4.0"
|
||||||
source-map "^0.6.1"
|
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-style-loader "^3.0.0"
|
||||||
vue-template-es2015-compiler "^1.6.0"
|
vue-template-es2015-compiler "^1.6.0"
|
||||||
|
|
||||||
@ -7563,9 +7560,9 @@ vue-markdown-loader@^2.1.0:
|
|||||||
loader-utils "^0.2.15"
|
loader-utils "^0.2.15"
|
||||||
markdown-it "^6.0.5"
|
markdown-it "^6.0.5"
|
||||||
|
|
||||||
vue-router@^2.7.0:
|
vue-router@^3.0.0:
|
||||||
version "2.7.0"
|
version "3.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.7.0.tgz#16d424493aa51c3c8cce8b7c7210ea4c3a89aff1"
|
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.0.tgz#458092ad5d8e3b8d26661cfbcbf46c120f8ea1ae"
|
||||||
|
|
||||||
vue-sfc-compiler@^0.0.2:
|
vue-sfc-compiler@^0.0.2:
|
||||||
version "0.0.2"
|
version "0.0.2"
|
||||||
@ -7689,9 +7686,9 @@ webpack-sources@^1.0.1:
|
|||||||
source-list-map "^2.0.0"
|
source-list-map "^2.0.0"
|
||||||
source-map "~0.5.3"
|
source-map "~0.5.3"
|
||||||
|
|
||||||
webpack@^3.5.5:
|
webpack@^3.7.1:
|
||||||
version "3.6.0"
|
version "3.7.1"
|
||||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.6.0.tgz#a89a929fbee205d35a4fa2cc487be9cbec8898bc"
|
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.7.1.tgz#6046b5c415ff7df7a0dc54c5b6b86098e8b952da"
|
||||||
dependencies:
|
dependencies:
|
||||||
acorn "^5.0.0"
|
acorn "^5.0.0"
|
||||||
acorn-dynamic-import "^2.0.0"
|
acorn-dynamic-import "^2.0.0"
|
||||||
@ -7913,9 +7910,9 @@ yeast@0.1.2:
|
|||||||
version "0.1.2"
|
version "0.1.2"
|
||||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||||
|
|
||||||
zan-doc@^0.3.5:
|
zan-doc@^0.3.6:
|
||||||
version "0.3.5"
|
version "0.3.6"
|
||||||
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.5.tgz#f0aa9cd3dcca524a58acd606d34dd17d223f4560"
|
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.6.tgz#fd21ebde256898c5e057c9d169c848666bf41420"
|
||||||
dependencies:
|
dependencies:
|
||||||
cheerio "0.22.0"
|
cheerio "0.22.0"
|
||||||
decamelize "^1.2.0"
|
decamelize "^1.2.0"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user