diff --git a/document/components/docs/en-US/form.md b/document/components/docs/en-US/form.md index 029e4a885825fe39e8977b1a61154a8fd5042612..46d584e3f66df5eed211c729e147c8468757762a 100644 --- a/document/components/docs/en-US/form.md +++ b/document/components/docs/en-US/form.md @@ -345,6 +345,183 @@ CubeForm is a schema-based form generator component. Like the `PCA` component, you can use `component` to define your custom component. Or use slots, like use DatePicker component. +- Questionnaire + + You can use form features to build your own app, like questionnaire. Code source: https://github.com/didi/cube-ui/tree/dev/example/components/questionnaire + + ```html + + ``` + ```js + // source + // https://github.com/didi/cube-ui/tree/dev/example/components/questionnaire/questionnaire.vue + import DemoQuestionnaire from 'example/components/questionnaire/questionnaire.vue' + export default { + data() { + return { + tip: '请配合如实填写问卷,确保xxxx相关文案', + questions: [ + { + type: 'switch', + model: 'switch', + title: '询问是否?' + // required: true + }, + { + type: 'input', + model: 'input', + title: '输入', + options: { + placeholder: '请输入' + }, + on: 'switch', + required: true + }, + { + type: 'date', + model: 'date', + title: '日期', + options: { + // min: '2020-01-01', + // max: '2020-02-18' + }, + required: true + }, + { + type: 'time', + model: 'time', + title: '时间', + options: { + min: '01:00', + max: '23:59' + }, + required: true + }, + { + type: 'select', + model: 'select', + title: '选择', + options: [ + 'option1', + 'option2', + 'option3' + ], + required: true + }, + { + type: 'radio', + model: 'radio', + title: '单选', + options: [ + '单选1', + '单选2', + '单选3' + ], + required: true + }, + { + type: 'checkbox', + model: 'checkbox', + title: '多选', + options: [ + '多选1', + '多选2', + '多选3' + ], + required: true + }, + { + type: 'textarea', + model: 'textarea', + title: '多行文本', + on: { + model: 'checkbox', + options: ['多选1', '多选3'] + }, + required: true + }, + { + type: 'checkbox', + row: true, + model: 'checkbox2', + title: '多选-横', + options: [ + '多选-横1', + '多选-横2', + '多选-横3' + ], + required: true + }, + { + type: 'tel', + model: 'tel', + title: '手机号', + options: { + placeholder: '请输入手机号' + }, + required: true + }, + { + type: 'rate', + model: 'rate', + title: '级别', + options: { + max: 10 + }, + required: true + }, + { + type: 'city', + model: 'city', + title: '城市', + required: true + }, + { + type: 'upload', + model: 'upload', + title: '上传', + options: { + action: '//jsonplaceholder.typicode.com/photos/', + max: 2 + }, + required: true + }, + { + type: 'agreement', + model: 'agreement', + options: { + text: '请同意', + link: { + text: '《xx协议》', + href: 'https://github.com/didi/cube-ui' + }, + desc: '说明:本人承诺xx xxxxx xxx xx。' + }, + required: true, + errMsg: '请同意协议' + } + ], + submit: { + text: 'Submit' + } + } + }, + components: { + DemoQuestionnaire + }, + methods: { + submitHandler(model) { + console.log('submit', model) + } + } + } + ``` + ### Props #### Form diff --git a/document/components/docs/zh-CN/form.md b/document/components/docs/zh-CN/form.md index 5999447b5a849a366f622388cbd4ab4e956ec063..803b6ac653a9241dc854a281f0fad6a09d86a073 100644 --- a/document/components/docs/zh-CN/form.md +++ b/document/components/docs/zh-CN/form.md @@ -345,6 +345,183 @@ 可以通过 `component` 指定实现了 `v-model` 的自定义组件,例如示例中的 `PCA` 组件;也可以通过使用插槽自定义结构行为,比如示例中的日期选择。 + - 自定义问卷场景 + + 你可以利用 Form 组件的特性轻松实现类似问卷这种场景表单,组件示例源代码:https://github.com/didi/cube-ui/tree/dev/example/components/questionnaire + + ```html + + ``` + ```js + // source + // https://github.com/didi/cube-ui/tree/dev/example/components/questionnaire/questionnaire.vue + import DemoQuestionnaire from 'example/components/questionnaire/questionnaire.vue' + export default { + data() { + return { + tip: '请配合如实填写问卷,确保xxxx相关文案', + questions: [ + { + type: 'switch', + model: 'switch', + title: '询问是否?' + // required: true + }, + { + type: 'input', + model: 'input', + title: '输入', + options: { + placeholder: '请输入' + }, + on: 'switch', + required: true + }, + { + type: 'date', + model: 'date', + title: '日期', + options: { + // min: '2020-01-01', + // max: '2020-02-18' + }, + required: true + }, + { + type: 'time', + model: 'time', + title: '时间', + options: { + min: '01:00', + max: '23:59' + }, + required: true + }, + { + type: 'select', + model: 'select', + title: '选择', + options: [ + 'option1', + 'option2', + 'option3' + ], + required: true + }, + { + type: 'radio', + model: 'radio', + title: '单选', + options: [ + '单选1', + '单选2', + '单选3' + ], + required: true + }, + { + type: 'checkbox', + model: 'checkbox', + title: '多选', + options: [ + '多选1', + '多选2', + '多选3' + ], + required: true + }, + { + type: 'textarea', + model: 'textarea', + title: '多行文本', + on: { + model: 'checkbox', + options: ['多选1', '多选3'] + }, + required: true + }, + { + type: 'checkbox', + row: true, + model: 'checkbox2', + title: '多选-横', + options: [ + '多选-横1', + '多选-横2', + '多选-横3' + ], + required: true + }, + { + type: 'tel', + model: 'tel', + title: '手机号', + options: { + placeholder: '请输入手机号' + }, + required: true + }, + { + type: 'rate', + model: 'rate', + title: '级别', + options: { + max: 10 + }, + required: true + }, + { + type: 'city', + model: 'city', + title: '城市', + required: true + }, + { + type: 'upload', + model: 'upload', + title: '上传', + options: { + action: '//jsonplaceholder.typicode.com/photos/', + max: 2 + }, + required: true + }, + { + type: 'agreement', + model: 'agreement', + options: { + text: '请同意', + link: { + text: '《xx协议》', + href: 'https://github.com/didi/cube-ui' + }, + desc: '说明:本人承诺xx xxxxx xxx xx。' + }, + required: true, + errMsg: '请同意协议' + } + ], + submit: { + text: 'Submit' + } + } + }, + components: { + DemoQuestionnaire + }, + methods: { + submitHandler(model) { + console.log('submit', model) + } + } + } + ``` + ### Props 配置 #### CubeForm