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

docs(Form): add Field Type docs

Browse Source
This commit is contained in:
陈嘉涵 2020-02-11 11:00:51 +08:00
parent c2cafe289e
commit de5dfe9211
5 changed files with 323 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/form/README.md
View File

@ -55,6 +55,146 @@ export default {
}
```
### Field Type - Switch
```html
<van-field name="switch" label="Switch">
<van-switch v-model="switchChecked" slot="input" size="20" />
</van-field>
```
```js
export default {
data() {
return {
switchChecked: false,
};
},
};
```
### Field Type - Checkbox
```html
<van-field name="checkbox" label="Checkbox">
<van-checkbox v-model="checkbox" slot="input" shape="square" />
</van-field>
<van-field name="checkboxGroup" label="CheckboxGroup">
<van-checkbox-group
v-model="checkboxGroup"
slot="input"
direction="horizontal"
>
<van-checkbox name="1" shape="square">Checkbox 1</van-checkbox>
<van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>
</van-checkbox-group>
</van-field>
```
```js
export default {
data() {
return {
checkbox: false,
checkboxGroup: [],
};
},
};
```
### Field Type - Radio
```html
<van-field name="radio" label="Radio">
<van-radio-group v-model="radio" direction="horizontal" slot="input">
<van-radio name="1">Radio 1</van-radio>
<van-radio name="2">Radio 2</van-radio>
</van-radio-group>
</van-field>
```
```js
export default {
data() {
return {
radio: '1',
};
},
};
```
### Field Type - Stepper
```html
<van-field name="stepper" label="Stepper">
<van-stepper v-model="stepper" slot="input" />
</van-field>
```
```js
export default {
data() {
return {
stepper: 1,
};
},
};
```
### Field Type - Rate
```html
<van-field name="rate" label="Rate">
<van-rate v-model="rate" slot="input" />
</van-field>
```
```js
export default {
data() {
return {
rate: 3,
};
},
};
```
### Field Type - Slider
```html
<van-field name="slider" label="Slider">
<van-slider v-model="slider" slot="input" />
</van-field>
```
```js
export default {
data() {
return {
slider: 50,
};
},
};
```
### Field Type - Uploader
```html
<van-field name="uploader" label="Uploader">
<van-uploader v-model="uploader" slot="input" multiple max-count="2" />
</van-field>
```
```js
export default {
data() {
return {
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
};
},
};
```
## API
### Props

157
src/form/README.zh-CN.md
View File

@ -1,5 +1,9 @@
# Form 表单
### 介绍
用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型
### 引入
```js
@ -13,6 +17,8 @@ Vue.use(Form);
### 基础用法
在表单中，每个 [Field](#/zh-CN/field) 代表一个表单项，使用 Field 的`rules`属性可以定义校验规则
```html
<van-form @submit="onSubmit" @failed="onFailed">
<van-field
@ -52,7 +58,147 @@ export default {
console.log('failed', errorInfo);
},
},
}
};
```
### 表单项类型 - 开关
```html
<van-field name="switch" label="开关">
<van-switch v-model="switchChecked" slot="input" size="20" />
</van-field>
```
```js
export default {
data() {
return {
switchChecked: false,
};
},
};
```
### 表单项类型 - 复选框
```html
<van-field name="checkbox" label="复选框">
<van-checkbox v-model="checkbox" slot="input" shape="square" />
</van-field>
<van-field name="checkboxGroup" label="复选框组">
<van-checkbox-group
v-model="checkboxGroup"
slot="input"
direction="horizontal"
>
<van-checkbox name="1" shape="square">复选框 1</van-checkbox>
<van-checkbox name="2" shape="square">复选框 2</van-checkbox>
</van-checkbox-group>
</van-field>
```
```js
export default {
data() {
return {
checkbox: false,
checkboxGroup: [],
};
},
};
```
### 表单项类型 - 单选框
```html
<van-field name="radio" label="单选框">
<van-radio-group v-model="radio" direction="horizontal" slot="input">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
</van-field>
```
```js
export default {
data() {
return {
radio: '1',
};
},
};
```
### 表单项类型 - 步进器
```html
<van-field name="stepper" label="步进器">
<van-stepper v-model="stepper" slot="input" />
</van-field>
```
```js
export default {
data() {
return {
stepper: 1,
};
},
};
```
### 表单项类型 - 评分
```html
<van-field name="rate" label="评分">
<van-rate v-model="rate" slot="input" />
</van-field>
```
```js
export default {
data() {
return {
rate: 3,
};
},
};
```
### 表单项类型 - 滑块
```html
<van-field name="slider" label="滑块">
<van-slider v-model="slider" slot="input" />
</van-field>
```
```js
export default {
data() {
return {
slider: 50,
};
},
};
```
### 表单项类型 - 文件上传
```html
<van-field name="uploader" label="文件上传">
<van-uploader v-model="uploader" slot="input" multiple max-count="2" />
</van-field>
```
```js
export default {
data() {
return {
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
};
},
};
```
## API
@ -60,14 +206,17 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| ---- | ---- | ---- | ------ |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| ------ | ---- | -------- |
### Slots
| 名称 | 说明 |
|------|------|
| ---- | ---- |

2
src/form/demo/BasicUsage.vue
View File

@ -16,7 +16,7 @@
:rules="[{ required: true, message: $t('requirePassword') }]"
:placeholder="$t('password')"
/>
<div style="margin: 16px;">
<div style="margin: 16px 16px 0;">
<van-button type="info" round block>{{ $t('submit') }}</van-button>
</div>
</van-form>

14
src/form/demo/FieldType.vue
View File

@ -2,7 +2,7 @@
<demo-block :title="$t('fieldType')">
<van-form @submit="onSubmit">
<van-field name="switch" :label="$t('switch')">
<van-switch v-model="switchChecked" slot="input" size="24" />
<van-switch v-model="switchChecked" slot="input" size="20" />
</van-field>
<van-field name="checkbox" :label="$t('checkbox')">
@ -26,11 +26,15 @@
<van-field name="radio" :label="$t('radio')">
<van-radio-group v-model="radio" direction="horizontal" slot="input">
<van-radio name="1" class="demo-radio">{{ $t('radio') }} 1</van-radio>
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
</van-radio-group>
</van-field>
<van-field name="stepper" :label="$t('stepper')">
<van-stepper v-model="stepper" slot="input" />
</van-field>
<van-field name="rate" :label="$t('rate')">
<van-rate v-model="rate" slot="input" />
</van-field>
@ -39,15 +43,11 @@
<van-slider v-model="slider" slot="input" />
</van-field>
<van-field name="stepper" :label="$t('stepper')">
<van-stepper v-model="stepper" slot="input" />
</van-field>
<van-field name="uploader" :label="$t('uploader')">
<van-uploader v-model="uploader" slot="input" multiple max-count="2" />
</van-field>
<div style="margin: 16px;">
<div style="margin: 16px 16px 0;">
<van-button type="info" round block>{{ $t('submit') }}</van-button>
</div>
</van-form>

22
src/form/test/__snapshots__/demo.spec.js.snap
View File

@ -135,6 +135,28 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>文件上传</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-uploader">
<div class="van-uploader__wrapper">
<div class="van-uploader__preview">
<div class="van-image van-uploader__preview-image" style="overflow: hidden; border-radius: 4px;"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
<!----></i>
</div>
<div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
<!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin: 16px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
</form>
</div>