vue组件内钩子_钩子上的Vue Form组件

vue组件内钩子

语言形式 (vue-form)

Vue Form component on hooks.

挂钩上的Vue Form组件。

View Demo 查看演示 Download Source 下载源

安装 (Installation)

npm i @detools/vue-form

用法 (Usage)

<script>
import { Button } from 'element-ui'
import Form, { Input } from '@detools/vue-form'

export default {
  data() {
    return {
      formValues: {},
    }
  },

  methods: {
    handleSubmit(values) {
      this.formValues = values
    },
  },

  render() {
    return (
      <div>
        <h1>Basic Form</h1>
        <div class="wrapper">
          <div class="form">
            <Form handleSubmit={this.handleSubmit}>
              <Input name="username" placeholder="Username" />
              <br />
              <br />
              <Button nativeType="reset">Reset</Button>
              <Button nativeType="submit" type="primary">
                Save
              </Button>
            </Form>
          </div>
          <div class="values">
            <strong>Form Values</strong>
            <br />
            <br />
            <div>{JSON.stringify(this.formValues, null, 2)}</div>
          </div>
        </div>
      </div>
    )
  },
}
</script>

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

• Checkbox

  复选框

• DatePicker

  日期选择器

• Input

  输入项

• InputNumber

  输入编号

• Radio

  无线电

• Select

  选择

• Slider

  滑杆

• Switch

  开关

• TimePicker

  时间选择器

• Form

  形成

路线图 (Roadmap)

• Add remaining components

  添加其余组件

• Add validation examples

  添加验证示例

翻译自: https://vuejsexamples.com/vue-form-component-on-hooks/

vue组件内钩子