Nietzsche's Preposterous Moustache

    @karpo-element/ele-form
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    @karpo-element/ele-form | 基于 element-ui 的数据驱动表单组件

    使用说明

    公司项目大多为基于element-ui的后台类项目,对于表单开发使用该组件可进行配置式开发。本组件参考vue-ele-form项目进行定制化开发。

    快速开始

    安装

    npm i @karpo-element/ele-form

    使用

    import Vue from 'vue'
    import App from './App.vue'
    // 引入 element-ui
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    // 引入 vue-ele-form
    import EleForm from '@karpo-element/ele-form'
    
    Vue.config.productionTip = false
    
    // 注册 element-ui
    Vue.use(ElementUI)
    
    // 注册 vue-ele-form
    Vue.use(EleForm)
    
    new Vue({
      render: h => h(App)
    }).$mount('#app')

    全局配置

    !注意:不是 upload: { attrs: { action: "xxx"} },也就是不需要 attrs 包裹

    // 在引入 EleForm 时,可以传入一个全局配置对象(可选), 例如:
    Vue.use(EleForm, {
      // 所有和上传相关(上传图片, 上传视频, 富文本中图片上传)
      upload: {
        action: 'https://www.xxx.com/posts', // 请求地址,
        data: { token: 'xxx' }, // 附带的参数,
        responseFn (response) { // 处理响应结果
          return 'https://www.xxx.com/upload/' + response.id
        }
      },
      // number类型
      number: {
        min: 0 // 所有 number 类型, 最小值为 0
      }
    })

    局部注册

    import EleForm from '@karpo-element/ele-form'
    
    export default {
      components: { EleForm },
      // ....
    }

    可视化生成表单

    f-render 演示图

    f-render地址

    说明

    vue-ele-form 是基于 element-ui form 的二次封装, 主要特点:

    而上面所说的一切只需要一行 html 和 数据即可实现, 即保证了质量, 又使得开发速度仿佛坐上 🚀!

    文档

    组件使用详细文档

    Install

    npm i @karpo-element/ele-form

    DownloadsWeekly Downloads

    0

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    8.53 MB

    Total Files

    83

    Last publish

    Collaborators

    • hzcdt
    • duanledexian