diff --git a/src/form/README.md b/src/form/README.md index 9c22c7501..d299c4b6c 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -55,6 +55,146 @@ export default { } ``` +### Field Type - Switch + +```html + + + +``` + +```js +export default { + data() { + return { + switchChecked: false, + }; + }, +}; +``` + +### Field Type - Checkbox + +```html + + + + + + Checkbox 1 + Checkbox 2 + + +``` + +```js +export default { + data() { + return { + checkbox: false, + checkboxGroup: [], + }; + }, +}; +``` + +### Field Type - Radio + +```html + + + Radio 1 + Radio 2 + + +``` + +```js +export default { + data() { + return { + radio: '1', + }; + }, +}; +``` + +### Field Type - Stepper + +```html + + + +``` + +```js +export default { + data() { + return { + stepper: 1, + }; + }, +}; +``` + +### Field Type - Rate + +```html + + + +``` + +```js +export default { + data() { + return { + rate: 3, + }; + }, +}; +``` + +### Field Type - Slider + +```html + + + +``` + +```js +export default { + data() { + return { + slider: 50, + }; + }, +}; +``` + +### Field Type - Uploader + +```html + + + +``` + +```js +export default { + data() { + return { + uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }], + }; + }, +}; +``` + ## API ### Props diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index 3e6a35d76..0344c7ddd 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -1,5 +1,9 @@ # Form 表单 +### 介绍 + +用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型 + ### 引入 ```js @@ -13,6 +17,8 @@ Vue.use(Form); ### 基础用法 +在表单中，每个 [Field](#/zh-CN/field) 代表一个表单项，使用 Field 的`rules`属性可以定义校验规则 + ```html + + +``` + +```js +export default { + data() { + return { + switchChecked: false, + }; + }, +}; +``` + +### 表单项类型 - 复选框 + +```html + + + + + + 复选框 1 + 复选框 2 + + +``` + +```js +export default { + data() { + return { + checkbox: false, + checkboxGroup: [], + }; + }, +}; +``` + +### 表单项类型 - 单选框 + +```html + + + 单选框 1 + 单选框 2 + + +``` + +```js +export default { + data() { + return { + radio: '1', + }; + }, +}; +``` + +### 表单项类型 - 步进器 + +```html + + + +``` + +```js +export default { + data() { + return { + stepper: 1, + }; + }, +}; +``` + +### 表单项类型 - 评分 + +```html + + + +``` + +```js +export default { + data() { + return { + rate: 3, + }; + }, +}; +``` + +### 表单项类型 - 滑块 + +```html + + + +``` + +```js +export default { + data() { + return { + slider: 50, + }; + }, +}; +``` + +### 表单项类型 - 文件上传 + +```html + + + +``` + +```js +export default { + data() { + return { + uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }], + }; + }, +}; ``` ## API @@ -60,14 +206,17 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| +| ---- | ---- | ---- | ------ | + ### Events | 事件名 | 说明 | 回调参数 | -|------|------|------| +| ------ | ---- | -------- | + ### Slots | 名称 | 说明 | -|------|------| +| ---- | ---- | + diff --git a/src/form/demo/BasicUsage.vue b/src/form/demo/BasicUsage.vue index 837030881..7877a1a47 100644 --- a/src/form/demo/BasicUsage.vue +++ b/src/form/demo/BasicUsage.vue @@ -16,7 +16,7 @@ :rules="[{ required: true, message: $t('requirePassword') }]" :placeholder="$t('password')" /> -
+
{{ $t('submit') }}
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue index 44b3e0b2b..46613f326 100644 --- a/src/form/demo/FieldType.vue +++ b/src/form/demo/FieldType.vue @@ -2,7 +2,7 @@ - + @@ -26,11 +26,15 @@ - {{ $t('radio') }} 1 + {{ $t('radio') }} 1 {{ $t('radio') }} 2 + + + + @@ -39,15 +43,11 @@ - - - - -
+
{{ $t('submit') }}
diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap index 35ccef950..b4e339164 100644 --- a/src/form/test/__snapshots__/demo.spec.js.snap +++ b/src/form/test/__snapshots__/demo.spec.js.snap @@ -135,6 +135,28 @@ exports[`renders demo correctly 1`] = `
+
+
文件上传
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+