组件化：局部批量引入示例组件

一、局部批量引入

// 局部批量引入示例组件：(其组件目录的相对路径, 是否查询其子目录, 匹配基础组件文件名的正则表达式)
const requireComponent  = require.context('./..', true, /\w+\.vue$/);
// 获取所有组件对象
const baseComponents = requireComponent.keys().reduce((preModule, curModule) => {
    // 模块对象
    let value = requireComponent(curModule);
    // 组件名
    let moduleName = curModule.replace(/^\.\/(.*)\.\w+$/, '$1').split('/')[0];
    preModule[moduleName] = value.default;
    return preModule;
}, {});

二、vue 中注册

方式一：只有批量引入的组件

export default {
    components: baseComponents,
	methods: {
		...
	}
}

方式二：存在其它组件

export default {
    components: {
        ...baseComponents,
        codes
    },
	methods: {
		...
	}
}

三、使用方法

<keep-alive>
	<component :is="type"></component>
</keep-alive>

四、上源码

<template>
    <div>
        <div class="main-menu-left">
            <el-menu default-active="0" :collapse="false" @select="handleOpen" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item v-for="(item, index) of list" :key="index" :index="index.toString()">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.name}}</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="main-menu-right">
            <el-tabs ref="tabs" :value="selectTab" type="border-card" class="demo-tabs" @tab-click="tabClick">
                <el-tab-pane label="示例" name="tab01" class="demo-tab-pane">
                    <component :is="type"></component>
                </el-tab-pane>
                <el-tab-pane label="源码" name="tab02" class="demo-tab-pane">
                    <codes ref="codes"></codes>
                </el-tab-pane>
            </el-tabs> 
        </div>
    </div>
</template>

<script>
import codes from './code.vue'

// 局部批量引入示例组件：(其组件目录的相对路径, 是否查询其子目录, 匹配基础组件文件名的正则表达式)
const requireComponent  = require.context('./..', true, /\w+\.vue$/);
// 获取所有组件对象
const baseComponents = requireComponent.keys().reduce((preModule, curModule) => {
    // 模块对象
    let value = requireComponent(curModule);
    // 组件名
    let moduleName = curModule.replace(/^\.\/(.*)\.\w+$/, '$1').split('/')[0];
    preModule[moduleName] = value.default;
    return preModule;
}, {});

export default {
    components: {
        ...baseComponents,
        codes
    },
    data () {
        return {
            selectTab: 'tab01',
            type: 'GmMapContainer',
            list: [
                {
                    path: 'GmMapContainer',
                    name: '1.二维地图容器'
                },
                {
                    path: 'GmSceneContainer',
                    name: '2.三维地图容器'
                },
                {
                    path: 'GmLayerTree',
                    name: '3.目录树'
                },
                {
                    path: 'GmBaselayerSwitch',
                    name: '4.底图切换'
                },
                {
                    path: 'GmLayerVisible',
                    name: '5.图层透明度'
                },
                {
                    path: 'GmMapMeasureToolbar',
                    name: '6.二维量算工具条'
                },
                {
                    path: 'GmSceneMeasureToolbar',
                    name: '7.三维量算工具条'
                },
                {
                    path: 'GmMapInteractToolbar',
                    name: '8.二维交互工具条'
                },
                {
                    path: 'GmFeatureResultDataset',
                    name: '9.要素数据集'
                },
                {
                    path: 'GmPoiSearchbox',
                    name: '10.POI 搜索框'
                },
                {
                    path: 'GmSceneThemeSwitch',
                    name: '11.三维场景主题切换'
                },
                {
                    path: 'GmLoginForm',
                    name: '12.登录'
                },
                {
                    path: 'GmCommonToolbar',
                    name: '13.工具条'
                }
            ]
        }
    },
    methods: {
        //组件切换
        handleOpen(index) {
            //示例切换
            this.type = this.list[index].path;
            //示例与源码切换（貌似没效果）
            // this.selectTab = 'tab01';
            //只能内部处理
            this.$refs.tabs.currentName = 'tab01';
        },
        //示例/源码切换
        tabClick(tab) {
            //代码页
            if(tab.name === 'tab02') {
                //高度重置
                let height = document.documentElement.clientHeight - 42 + "px"
                document.getElementById('pane-tab02').style.height = height;
                // resetDemoHeight();
                //代码展示
                let codes = require(`@/views/${this.type}/code.js`);
                this.$refs.codes.setCode(codes.default);
            }            
        }
    },
    mounted () {
        window.addEventListener("resize", () =>  resetDemoHeight(), false);
        //监听高度变化
        resetDemoHeight();        
    },
    destroyed () {
        window.removeEventListener("resize", () =>  resetDemoHeight(), false);
    }
}
//监听高度变化
function resetDemoHeight() {
    let height = document.documentElement.clientHeight - 42 + "px"
    document.getElementsByClassName('demo-tabs')[0]
    .getElementsByClassName('demo-tab-pane')[0]
    .style.height = height;
}
</script>

<style scoped>
.main-menu-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: #ccc;
    overflow-y: auto;
}
.main-menu-right {
    position: absolute;
    left: 200px;
    top: 0;
    bottom: 0;
    right: 0;
}
.demo-tabs {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
}
</style>
<style lang="stylus">
.demo-tabs .el-tabs__content {
    padding: 0;
}
</style>

五、参考

链接