全自动导入文件 #10

Merged
qiaopengfei merged 1 commits from qiaopengfei into master 2024-07-02 20:21:41 +08:00
3 changed files with 42 additions and 37 deletions

View File

@ -43,7 +43,6 @@ export default {
}, },
computed: { computed: {
attrs() { attrs() {
cloneDeep();
if (this.$attrs["remote-method"]) { if (this.$attrs["remote-method"]) {
let obj = cloneDeep(this.$attrs); let obj = cloneDeep(this.$attrs);
Reflect.deleteProperty(obj, "remote-method"); Reflect.deleteProperty(obj, "remote-method");

View File

@ -1,32 +1,38 @@
// 导入button组件 // 使用 require.context 自动扫描并获取 packages 目录下所有 index.js 文件的引用
import agInput from './agInput/index' const requireComponent = require.context('./', true, /index\.js$/);
import agSelect from './agSelect/index'
// 组件列表 // 定义一个数组来存储组件配置
const components = [ const components = requireComponent.keys().reduce((components, fileName) => {
agInput, // 排除可能的非 Vue 组件文件(这里假设所有 index.js 都是 Vue 组件)
agSelect if (fileName.endsWith('index.js')) {
] const componentConfig = requireComponent(fileName).default;
if (componentConfig && componentConfig.name) {
components[componentConfig.name] = componentConfig;
}
}
return components;
}, {});
// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册) // 定义 install 方法,接收 Vue 作为参数
const install = function (Vue) { const install = function (Vue) {
// 判断是否安装 if (install.installed) return;
if (install.installed) return Object.keys(components).forEach(name => {
// 遍历注册全局组件 Vue.component(name, components[name]);
components.map(component => Vue.component(component.name, component)) });
} install.installed = true;
};
// 判断是否是直接引入文件 // 如果是在浏览器环境且全局有 Vue则自动安装
if (typeof window !== 'undefined' && window.Vue) { if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue) install(window.Vue);
} }
// 导出 install 方法和所有组件
export default { export default {
// 导出的对象必须具有 install才能被 Vue.use() 方法安装 // 为了方便单独引入组件,可以直接导出 components 对象
install, ...components
} };
export {
// 以下是具体的组件列表 // 注意:虽然这里导出了 components 对象,但通常不建议直接这样使用,
agInput, // 因为这样做会破坏组件的模块化封装。更常见的做法是
agSelect // 在需要时从该文件中单独导入特定的组件。
}

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<Pedestal <agSelect
ref="ref_Pedestal" ref="ref_Pedestal"
v-model="value" v-model="value"
@input="changeInput" @input="changeInput"
@ -17,14 +17,14 @@
>导出</el-button >导出</el-button
> >
</template> --> </template> -->
</Pedestal> </agSelect>
</div> </div>
</template> </template>
<script> <script>
import Pedestal from "../packages/Select/src/index"; import agSelect from "../packages/agSelect/src/index";
export default { export default {
components: { Pedestal }, components: { agSelect },
data() { data() {
return { return {
value: "", value: "",