@liguang/vue-elementui-customized

说明

$3

使用时，需要在 vue.config.js 中配置 alias 如下(因为在Element源码内部，也使用了 element-ui 别名)：

样式文件要单独引入
require('@liguang/vue-elementui-customized/src/elementui/packages/theme-chalk/src/index.scss')

``vue
const path = require('path')

function resolve (dir) {
return path.join(__dirname, dir)
}

module.exports = {
runtimeCompiler: true,
transpileDependencies: [
// 默认babel-loader忽略mode_modules，这里要让其编译
'@liguang/vue-elementui-customized'
]
chainWebpack: (config) => {
config.resolve.alias
.set('element-ui', resolve('@liguang/vue-elementui-customized/src/elementui'))
}
}
`

自定义了Input、InputNumber、Loading、Tooltip、Upload 以及 Clickoutside，详见相应目录的 readme.md

$3

如果注入router，当页面切换时，弹框会自动关闭。
此模块大大方便了Modal的使用，使用方式如下：

1. 编写Modal组件

`vue
// TestModal.vue


`

2. 初始化

`javascript
import Modal from '@liguang/vue-elementui-customized/modal'
// 参数为待注入的对象，是可选项
Modal.initModal({
store,
router
})
Vue.use(Modal)
`

3. 注册Modal组件

`javascript
import TestModal from './models/TestModal.vue'
import Modal from '@liguang/vue-elementui-customized/modal'

let modals = {
TestModal
}
for (let key in modals) {
if (modals.hasOwnProperty(key)) {
Modal.registerModal(key, modals[key])
}
}
`

4. 使用

`javascript
import Vue from 'vue'
let rst = Vue.prototype.modal('TestModal', arg0, arg1, ...)
// 这里返回值中包含 modal 实例，以及 promise（当Modal关闭时，主动调用关闭时会执行resolve，参数为close方法调用时的参数, 非主动调用关闭时执行reject(-1)
console.log(rst.modal)
rst.promise.then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
``

$3

查看示例