vuejs 表单_VueJS的表单状态管理

vuejs 表单

语言形式 (vue-form)

Not Only Form State Management for VueJS.

不仅为VueJS形成状态管理。

安装 (Installation)

npm i @detools/vue-form

用法 (Usage)

import { mapActions } from 'vuex'
import Form, { Input } from '@detools/vue-form'export default {data() {return {formValues: {},}},methods: {...mapActions('cart', ['checkout']),handleSubmit(values) {return this.checkout(values)},},render() {return (<div><h1>Basic Form</h1><div class="wrapper"><div class="form"><Form cancel submit handleSubmit={this.handleSubmit} v-model={this.formValues}><Input formItem label name="username" /></Form></div><div class="values"><strong>Form Values</strong><br /><br /><div>{JSON.stringify(this.formValues, null, 2)}</div></div></div></div>)},
}

更多例子 (More Examples)

See source in example/src folder. See demo at https://detools-vue-form.netlify.com

请参见example / src文件夹中的源代码。 请参阅https://detools-vue-form.netlify.com上的演示

可用的连接组件 (Available Connected Components)

• Checkbox复选框
• CheckboxGroup复选框组
• DatePicker日期选择器
• Input输入项
• InputNumber输入编号
• Radio无线电
• RadioGroup无线电集团
• Select选择
• Slider滑杆
• Switch开关
• TimePicker时间选择器
• Upload上载
• ArrayFieldArrayField
• Form形成

翻译自: https://vuejsexamples.com/form-state-management-for-vuejs/

vuejs 表单