index.js
1.98 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
import Vue from 'vue';
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 = {}) {
Object.values(components).forEach(component => {
// 组件前缀
const prefix = opts.name || 'z';
// 配置组件名称
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);
};
const _ImageViewer = function({ index, src, list }) {
const ImageViewer = Vue.extend(ElImageViewer);
const instance = new ImageViewer({ el: document.createElement('div') });
Object.assign(instance, {
index: src ? list.findIndex(url => url === src) : index,
urlList: list,
onClose() {
instance.$el.className = `${instance.$el.className} viewer-fade-leave-active viewer-fade-leave-to`;
setTimeout(function() {
document.body.removeChild(instance.$el);
}, 300);
},
});
document.body.appendChild(instance.$el);
};
export const ImageViewer = _ImageViewer;
export default {
install,
...components,
};