Vue.jsで21種類のフォーム要素をJSONで管理できる「vue-form-generator」

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vfg.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vfg.js"></script>
<div id="app">
  <div class="panel-body">
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

const VueFormGenerator = window['VueFormGenerator'];

new Vue({
  el: '#app',
  components: {
    "vue-form-generator": VueFormGenerator.component
  },
  data: {
    model: {
      id: 1,
      name: "John Doe",
      password: "J0hnD03!x4",
      age: 35,
      skills: ["Javascript", "VueJS"],
      email: "[email protected]",
      status: true
    },
    schema: {
      fields: [
        {
          type: "input",
          inputType: "text",
          label: "ID",
          model: "id",
          readonly: true,
          featured: false,
          disabled: true
        }, {
          type: "input",
          inputType: "text",
          label: "Name",
          model: "name",
          readonly: false,
          featured: true,
          required: true,
          disabled: false,
          placeholder: "User's name",
          validator: VueFormGenerator.validators.string
        }, {
          type: "input",
          inputType: "password",
          label: "Password",
          model: "password",
          min: 6,
          required: true,
          hint: "Minimum 6 characters",
          validator: VueFormGenerator.validators.string
        }, {
          type: "input",
          inputType: "number",
          label: "Age",
          model: "age",
          min: 18,
          validator: VueFormGenerator.validators.number
        }, {
          type: "input",
          inputType: "email",
          label: "E-mail",
          model: "email",
          placeholder: "User's e-mail address",
          validator: VueFormGenerator.validators.email
        }, {
          type: "checklist",
          label: "Skills",
          model: "skills",
          multi: true,
          required: true,
          multiSelect: true,
          values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
        }, {
          type: "switch",
          label: "Status",
          model: "status",
          multi: true,
          readonly: false,
    ...