工程方式


安装


npm install vue-ele-form --save


使用


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 'vue-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')


全局配置


// 在引入 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 'vue-ele-form'

export default {
  components: { EleForm },
  // ....
}


CDN方式


<!-- 引入Vue -->
<script src="https://unpkg.com/vue"></script>
<!-- 引入element -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 vue-ele-form -->
<script src="https://unpkg.com/vue-ele-form"></script>

<script type="text/javascript">
    // 如果需要,则进行全局配置
    Vue.prototype.$EleFormParams = {
      upload: {
        action: 'xxx'.
        // ...
      },
      // ...
    }
</script>