组件:组件、方法和指令导出
程序员文章站
2022-06-15 19:11:35
一、导出index.js 文件/** * 解析模块 * @param {*} path 文件路径 * @param {*} regFile 文件名正则 * @param type 模块类型,component 组件,function 方法,directive 指令 */const exportModule = (modulesList, type) => { // 获取模块对象列表 let modules = modulesList.keys().reduce(...
目录
一、导出
index.js 文件
/**
* 解析模块
* @param modulesList 模块对象列表
* @param type 模块类型,component 组件,function 方法,directive 指令
*/
const exportModule = (modulesList, type) => {
// 获取模块对象列表
let modules = modulesList.keys().reduce((obj, modulePath) => {
// 模块名
let moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
// 模块对象
let moduleObj = modulesList(modulePath);
// 放入模块
obj[moduleName] = moduleObj.default;
// 组件的单个导出
if(type === 'component') {
Object.assign(exports, { [moduleName]: moduleObj.default });
}
return obj;
}, {});
// 要导出的
let exportModules;
switch (type) {
case 'component': {
// 全局引入
exportModules = function (Vue, opts = {}) {
for (let i in modules) {
Vue.component(i, modules[i]);
}
};
//支持使用标签方式引入
if (typeof window !== "undefined" && window.Vue) {
exportModules(window.Vue);
}
break;
}
case 'function': {
exportModules = modules;
break;
}
case 'directive': {
// 全局引入
exportModules = function (Vue, opts = {}) {
for (let i in modules) {
Vue.directive(i, modules[i]);
}
};
break;
}
}
return exportModules;
}
// --- 组件 ---
// 注意:require 不能放在方法里,无法识别
const componentList = require.context("./src/components", true, /\.vue$/);
const MyComponents = exportModule(componentList, 'component');
// --- 方法 ---
const functionList = require.context("./src/functions", true, /\.js$/);
const MyFunctions = exportModule(functionList, 'function');
// --- 指令 ---
const directiveList = require.context("./src/directive", true, /\.js$/);
const MyDirectives= exportModule(directiveList, 'directive');
// 合并导出
Object.assign(exports, {MyComponents}, {MyFunctions}, {MyDirectives});
二、使用
1、全局引入
main.js
import Vue from 'vue'
import App from './App.vue'
// 全局引入 - 指令(仅全局)
import { MyDirectives } from 'my-webcomponents'
// 方式一
// MyDirectives(Vue);
// 方式二
Vue.use(MyDirectives);
// 全局引入 - 组件(可全局或局部)
import { MyComponents } from 'my-webcomponents';
Vue.use(MyComponents);
// 全局引入 - 方法(仅全局)
import { MyFunction } from 'my-webcomponents';
export default {
name: 'App'
}
new Vue({
render: h => h(App),
}).$mount('#app')
2、局部引入
单 .vue 文件
import { MyLayerTree, MyToolBar } from 'my-webcomponents'
export default {
components: {
MyLayerTree,
MyToolBar
},
// ...
</script>
本文地址:https://blog.csdn.net/sinat_31213021/article/details/112565347