guesswhy-reaper-form

···

⬇️ Install

npm install  guesswhy-reaper-form

🎨 Usage

main.js
import ReaperForm from 'guesswhy-reaper-form'
Vue.use(ReaperForm)
<reaper-form :width="80" :formItem="formItem" :formBtns="formBtns"></reaper-form>

// 表单配置
formItem: [
    // ...
    {
      label: "用户名",
      width: 100,
      rules: [
        { required: true, message: "用户名必须", trigger: "blur" },
        { min: 3, max: 5, message: "至少3~5个字符", trigger: "blur" },
      ],
      field: "uname",

      disabled: true,
      placeholder: "请输入用户名",
      icon: "el-icon-user-solid",
      type: "input",
    },
    {
      label: "密码",
      width: 100,
      rules: [
        { required: true, message: "密码必须", trigger: "blur" },
        { min: 3, max: 5, message: "至少3~5个字符", trigger: "blur" },
      ],
      field: "pwd",

      disabled: true,
      placeholder: "请输入密码",
      icon: "el-icon-lock",
      type: "password",
    },
    {
      label: "请选择密保问题",
      width: 200,
      field: "question",
      rules: [
        { required: true, message: "请选择密保问题", trigger: "change" },
      ],

      disabled: true,
      placeholder: "请输入密保问题",
      type: "select",
      payload: [
        { label: "你大爷名字", value: "你大爷名字" },
        { label: "您其中唯一讲师的名字", value: "您其中唯一讲师的名字" },
        { label: "你初念的名字", value: "你初念的名字" },
      ],
    },
    // ...
],
// 表单按钮组
formBtns: [
  {
    content:'创建/更新/重置',
    type: 'primary/success/info/warning/danger',
    click: formData => console.log('表单数据', formData)
  },
  {
    content:'创建/更新/重置',
    type: 'primary/success/info/warning/danger'
  },
  {
    content:'创建/更新/重置',
    type: 'primary/success/info/warning/danger'
  }
]

💡 Compiles and minifies for production

 具体使用要搭配element组件全局引入element库搭配一起使用，否则不生效

Show

License

### 🔒 License
See [Configuration Reference](https://cli.vuejs.org/config/).