前言 :
一個項目給多個公司使用時,可以配置個性化界面功能
配置客制化文件

//constructor是一個構造函數方法，創建對象時自動調用該方法 //類中聲明的方法不能加function關鍵字 //法之間不要用逗號分隔，否則會報錯 class TisCustom {constructor() {this.init();}init(params) {let userInfo = {};if( window.Tis_Store && window.Tis_Store.state){userInfo = window.Tis_Store.state.user.userInfo;}//替換系統標準的router，名字相同可以替換，名字不同會新增this.routers = [{path: "/login",name: "login",meta: {title: "Login - 登錄",hideInMenu: true,},component: () => import("../src/cutsom/seres/login/login.vue"),},];// 首頁展示配置this.home = {// 卡片組 (展示輪播圖這類的組件cards: [{id: 0, name: 'Serial Number Query', componentName: "CardSerialNumber", visible: true},{id: 1, name: 'Model Selection', componentName: "CardSelectModel", visible: true},{id: 2, name: 'Swiper', componentName: "CardSwiperSeres", visible: true},]};}; }

替換或者新增路由

const router_addRouters=function(data,rs){ //用來判斷是否有新增數組var hasReplaced = false;var needAddedList = [];//循環兩個路由數組for(var i=0;i<data.length;i++){for(var j=0;j<rs.length;j++){var router = rs[j];//判斷名稱是否相同if(data[i].name == router.name){//如果都有children，遞歸children比較，否則替換掉if(router.children && data[i].children){hasReplaced = true;//遞歸router_addRouters(data[i].children,router.children );}else{hasReplaced = true;rs[j] = data[i];}break;}}if(hasReplaced == false){needAddedList.push(data[i]);}}//把新增的push到routers數組for(var i=0;i<needAddedList.length;i++){rs.push(needAddedList[i]);} };//添加數組路由 kenshao 20210929 const router_myAddRouters=function(data){var rs = data;if(typeof data === "object" && isNaN(data.length)){rs = [];rs.push(data);}router_addRouters(rs,routes); };//加載客制化 let custom = new TisCustom(); if(custom.routers){router_myAddRouters(custom.routers); }

//其他組件 或者按鈕客制化

getCompList() {//替換原有的數據let tisCustom = new TisCustom();if(tisCustom.home && tisCustom.home.cards){this.compList = tisCustom.home.cards;}},

總結

以上是生活随笔為你收集整理的前端客制化的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。