index.js
2.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import Vue from 'vue';
import ZTable from './table/index';
import ZTableNormal from './table/normal';
import ZTableEditable from './table/editable';
import ElImageViewer from './upload/image-viewer';
let components = {};
const componentsFiles = require.context('./', true, /index\.vue/);
componentsFiles.keys().forEach(path => {
const component = componentsFiles(path);
components[component.default.name] = component.default;
});
// 给组件库配置install方法
const install = function(Vue, opts = {}) {
components[ZTable.name] = ZTable;
components[ZTableNormal.name] = ZTableNormal;
components[ZTableEditable.name] = ZTableEditable;
Object.values(components).forEach(component => {
// 组件前缀
const prefix = opts.name || 'eagle';
// 配置组件名称
const name = prefix + component.name;
component.name = name;
if (component.props && component.props.size && component.props.size.default && opts.size) {
component.props.size.default = opts.size;
}
if (component.computed) {
component.computed.zAlias = () => opts.alias || {};
component.computed.zHttp = () => opts.http;
} else {
component.computed = {
zAlias: () => {},
zHttp: () => opts.http,
};
}
// 给每个子组件配置install方法
component.install = function(Vue) {
Vue.component(name, component);
};
// 将每个子组件注册为全局组件
Vue.component(name, component);
});
ElImageViewer.install = function(Vue) {
Vue.component(ElImageViewer.name, ElImageViewer);
};
Vue.component(ElImageViewer.name, ElImageViewer);
Vue.directive('inner', {
bind: function(el) {
const inputInner = el.querySelector('.el-input__inner');
if (inputInner) {
inputInner.style.border = 0;
}
},
});
};
let instance = null;
const closeImageViewer = function(force) {
if (instance) {
if (force === true) {
document.body.removeChild(instance.$el);
} else {
instance.$el.className = `${instance.$el.className} viewer-fade-leave-active viewer-fade-leave-to`;
setTimeout(function() {
document.body.removeChild(instance.$el);
instance = null;
}, 200);
}
}
};
const _ImageViewer = function({ index, src, list, ...other }) {
if (instance) {
closeImageViewer(true);
}
const ImageViewer = Vue.extend(ElImageViewer);
instance = new ImageViewer({ el: document.createElement('div') });
Object.assign(instance, {
index: src ? list.findIndex(url => url === src) : index || 0,
urlList: list,
...other,
onClose: closeImageViewer,
});
document.body.appendChild(instance.$el);
};
export const ImageViewer = _ImageViewer;
ImageViewer.close = closeImageViewer;
export default {
install,
...components,
};