vue.js 表单_在Vue.js中轻松创建表单

vue.js 表单

📚创世形式 (📚 vue-genesis-forms)

Easy create forms in Vue.js

在Vue.js中轻松创建表单

🔥 support working:

🔥 support working:

• input, textarea, switch, select, colorpick

  输入，文本区域，开关，选择，颜色选择

🎨 next

🎨 next

• mult select, toggle, datepicker, radio

  多重选择，切换，日期选择器，单选

example usage: App.vue

example usage: App.vue

<template>
  <div>
    <app-form v-bind="{fields, data}" @form~input="input" @form~valid="valid"></app-form>
  </div>
</template>

<script>
import { AppForm, filter, field } from 'vue-genesis-forms'

export const fields = (scope) => {
  return filter(
    [
      field('name', 'Nome').$text().$scopes(['settings']).$form({width: 12}).$validate('required').$render(),
      field('email', 'E-mail').$text().$scopes(['settings']).$form({width: 6})
        .$validate('email', true).$required().$render(),
      field('color', 'Cor do Nick').$color('rgba').$scopes(['settings']).$form({width: 6}).$render(),
      field('about', 'Sobre você').$textarea('max', 20).$scopes(['settings']).$form({width: 12, minHeight: '100px'})
        .$validate('maxLength', 20).$render(),
      field('coisas', 'Coisas').$select(select, false).$scopes(['settings']).$form({width: 3}).$render(),
      field('notifications', 'Ativar Mensagens').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render(),
      field('logs', 'Ativar Logs').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render(),
      field('sockets', 'Ativar Sockets').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render()
    ],
    scope
  )
}

export const select = [
  {label: 'test 1', value: 'test1'},
  {label: 'test 2', value: 'test2'}
]

export default {
  name: 'app',
  components: { AppForm },
  data: () => ({
    fields: fields('settings'), // settings is scope
    ok: false,
    errors: {},
    data: {}
  }),
  methods: {
    input (data) {
      this.data = data
    },
    valid (status, errors) {
      this.ok = status === true
      this.errors = errors
    }
  },
  mounted () {
    this.data = {
      name: 'Test quem é melhor Vue ou React',
      email: '[email protected]',
      coisas: 'test2',
      notifications: 1,
      sockets: 1
    }
  }
}
</script>

翻译自: https://vuejsexamples.com/wasy-create-forms-in-vue-js/

vue.js 表单