分析页面-页面组件化
之前写了一个项目,大屏页面是通用页面但是遇到个别用户想要定制化,但是主页如果去做判断显得太过臃肿,后续也无法判断,由于公司不想维护多套代码,于是就考虑抽离成组件!直接看代码!
之前只有一个页面为'zhsy',考虑到别的地方有跳转到'zhsy',由于不能影响别的页面的跳转逻辑,所以这边考虑到把'zhsy'里面的代码抽离成组件,然后通过引入组件然后组测组件,最后通过后端返回的定制化的名字来控制页面显示
<template><component :is="dom[curSy]" />
</template>
<script setup>
import tyZhsy from './tyzhsy.vue'
import mcZhsy from './otherZhsy/mcZhsy.vue'
const curSy = ref('tyZhsy');
const store = useStore();
let name = store.getters.diffSystem.name
const dom = shallowReactive({tyZhsy, mcZhsy
})const changeName = () => {curSy.value = name + 'Zhsy'
}
changeName()
</script>
<style scoped lang="scss"></style>
2.vite项目中如果想要更灵活,可以考虑动态引入组测组件来实现这个功能,先通过import.meta.glob("./*.vue"),引入所有文件然后再遍历文件后注册组件,成为全局组件,具体是否为全局组件看个人需求使用,这样全局上就有所有的定制化组件,再通过后端返回的组件名,动态渲染
const modules = import.meta.glob("./*.vue");
const lsbjcomponents = {install: function (app) {for (let path in modules) {modules[path]().then((mod) => {const fileName = path?.split("/").pop().replace(".vue", "");app.component(fileName, mod["default"]);});}},
};