구성 요소 캡슐화
구성 요소 코드가 너무 커지는 것을 방지하기 위해 주요 기능 구성 요소를 여기에 캡슐화하여 코드의 모듈성과 단순성을 보장합니다.
구성 요소 구조
컴포넌트 캡슐화 및 재구성 후 컴포넌트 구조는 아래 그림과 같습니다.
코드 개요
홈 구성 요소는 단순화되었으며 탐색, 헤더 및 기본 콘텐츠의 세 가지 구성 요소를 포함합니다.
Home.vue
<템플릿>
<div class="컨테이너">
<!-- 导航菜单栏 -->
<MenuBar></MenuBar>
<!-- 头part区域 -->
<HeadBar></HeadBar>
<!-- 主内容区域 -->
<메인></메인>
</템플릿>
<스크립트>
"./HeadBar/HeadBar"
에서 HeadBar 가져오기
"./MenuBar/MenuBar"
에서 MenuBar 가져오기
"./Main/Main"에서 메인 가져오기
기본값 내보내기 {
구성요소:{
헤드바,
메뉴바,
메인
}
};
<스타일 범위 lang="scss">
.컨테이너 {
위치:절대;
상단: 0px;
왼쪽: 0px;
오른쪽: 0px;
배경: #4b5f6e;
}
</스타일>
헤드바.vue
<템플릿>
<div class="컨테이너">
<!-- 导航菜单隐藏显示切换 -->
<span class="collapse-switcher" @click.prevent="collapse">
<i class="el-icon-menu"></i>
<!-- 导航菜单 -->
<span class="nav-bar">
<el-menu :default-active="activeIndex" class="el-menu-demo" text-color="#fff"
활성 텍스트 색상="#ffd04b" 모드="수평" @select="selectNavBar()">
<el-menu-item index="1" @click="$router.push('/')">{
{$t("common.home")}}</ 엘 메뉴 항목>
<el-menu-item index="2">{
{$t("common.doc")}}</el-menu-item>
축소: 함수() {
},
this.$i18n.locale = lang
document.getElementById("언어").innerHTML = 라벨
let label = array[1]
let lang = array[0] === '' ? 'zh_cn' : 배열[0]
let array = command.split(':')
handlerCommand(명령) {
// 语言切换
},
console.log(key, keyPath)
selectNavBar(key, keyPath) {
방법: {
},
};
활성 인덱스:'1'
userAvatar: "",
사용자 이름: "Louis",
isCollapse: false,
반환 {
데이터() {
},
언어 선택기
테마 선택기,
구성요소:{
에서 LangSelector 가져오기
기본값 내보내기 {
에서 ThemePicker 가져오기
"@/comComponents/LangSelector"
"@/comComponents/ThemePicker"
"@/mock/index.js"에서 모의 가져오기;;
<스크립트>
</템플릿>
{$t("common.msgCenter")}}</el-menu-item>
</el-드롭다운>
</el-드롭다운 메뉴>{$t("common.logout")}}</el-dropdown-item> ;
<el-dropdown-item 분할 @click.native="logout">{{$t("common.config")}}</el-dropdown-item>
<el-dropdown-item>{{$t("common.myMsg")}}</el-dropdown-item>
<el-dropdown-item>{
<el-dropdown-menu 슬롯="dropdown">{사용자 이름}}</span>
<span class="el-dropdown-link"><img :src="this.userAvatar" /> {
<el-dropdown class="user-info-dropdown" Trigger="hover">
<!-- 용户信息 -->
<LangSelector 클래스="lang-selector"></LangSelector>
<!-- 语言切换 -->
<ThemePicker class="theme-picker"></ThemePicker>
<!-- 主题切换 -->
<span class="tool-bar">
</el-menu>
<el-menu-item index="3">{
//折叠导航栏
this.isCollapse = !this.isCollapse;
},
//출시录
로그아웃: function() {
var _this = 이것;
this.$confirm("确认退출吗?", "提示", {
유형: "경고"
})
.then(() => {
sessionStorage.removeItem("user");
this.$router.push
("/로그인");
})
.catch(() => {});
}
},
마운트됨() {
this.sysName = "나는 고양이를 좋아해요";;
var user = sessionStorage.getItem("user");
if (사용자) {
this.userName = 사용자;
this.userAvatar = require("@/assets/user.png");
}
}
};
<스타일 범위 lang="scss">
.컨테이너 {
위치: 절대;
왼쪽: 200px;
오른쪽: 0px;
높이: 60px;
줄 높이: 60px;
.collapse-switcher {
너비: 40px;
부동: 왼쪽;
커서: 포인터;
테두리 색상: rgba(111, 123, 131, 0.8);
테두리 왼쪽 너비: 1px;
border-left-style: 단색;
테두리 오른쪽 너비: 1px;
border-right-style: 단색;
색상: 흰색;
배경: #504e6180;
}
.nav-bar {
여백-왼쪽: 자동;
부동: 왼쪽;
.el-메뉴 {
배경: #504e6180;
}
}
.tool-bar {
부동: 오른쪽;
.theme-picker {
오른쪽 패딩: 10px;
}
.lang-selector {
오른쪽 패딩: 10px;
글꼴 크기: 15px;
색상: #fff;
커서: 포인터;
}
.user-info-dropdown {
글꼴 크기: 20px;
오른쪽 패딩: 20px;
색상: #fff;
커서: 포인터;
img {
너비: 40px;
높이: 40px;
테두리 반경: 10px;
여백: 10px 0px 10px 10px;
부동: 오른쪽;
}
}
}
}
</스타일>
MenuBar.vue
<템플릿>
<div class="menu-bar-container">
<!-- 로고 -->
<div 클래스="로고" :class="isCollapse?'menu-bar-collapse-width':'menu-bar-width'">
<img :src="this.logo" /> <div>{
{isCollapse?'':sysName}}</div>
<!-- 导航菜单 -->
<el-menu default-active="1-1" :class="isCollapse?'menu-bar-collapse-width':'menu-bar-width'" @open="오픈 핸들" @close="닫기 처리" @select="선택 처리" :collapse="isCollapse">
<el-submenu index="1">
<템플릿 슬롯="제목">
<i class="el-icon-location"></i>
<span 슬롯="제목">{
{$t("sys.sysMng")}}</span>
</템플릿>
<el-menu-item index="1-1" @click="$router.push('user')">{
{$t("sys.userMng")}}</el -메뉴 항목>
<el-menu-item index="1-2" @click="$router.push('dept')">{
{$t("sys.deptMng")}}</el -메뉴 항목>
<el-menu-item index="1-3" @click="$router.push('role')">{
{$t("sys.roleMng")}}</el -메뉴 항목>
<el-menu-item index="1-4" @click="$router.push('menu')">{
{$t("sys.menuMng")}}</el -메뉴 항목>
<el-menu-item index="1-5" @click="$router.push('log')">{
{$t("sys.logMng")}}</el -메뉴 항목>
</el-submenu>
<el-submenu index="2">
<템플릿 슬롯="제목">
<i class="el-icon-location"></i>
<span 슬롯="제목">{
{$t("sys.sysMonitor")}}</span>
</템플릿>
</el-submenu>
<el-menu-item index="3" 비활성화됨>
<i class="el-icon-document"></i>
<span 슬롯="제목">{
{$t("sys.nav3")}}</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<스팬 슬롯="제목">{
{$t("sys.nv4")}}</span>
</el-menu-item>
</el-menu>
</템플릿>
<스크립트>
기본값 내보내기 {
데이터() {
반환 {
isCollapse: false,
sysName: "",
로고: "",
};
},
방법: {
핸들오픈() {
console.log('handleopen');
},
handlerclose() {
console.log('handleclose');
},
handlerselect(a, b) {
console.log('handleselect');
}
},
마운트됨() {
this.sysName = "나는 고양이를 좋아해요";;
this.logo = require("@/assets/logo.png");
}
};
</스크립트>
<스타일 범위 lang="scss">
.menu-bar-container {
.el-메뉴 {
위치:절대;
상단: 60px;
하단: 0px;
텍스트 정렬: 왼쪽;
}
.로고 {
위치:절대;
상단: 0px;
높이: 60px;
줄 높이: 60px;
배경: #4b5f6e;
img {
너비: 40px;
높이: 40px;
테두리 반경: 0px;
여백: 10px 10px 10px 10px;
부동: 왼쪽;
}
div {
글꼴 크기: 22px;
색상: 흰색;
텍스트 정렬: 왼쪽;
}
}
.menu-bar-width {
너비: 200px;
}
.menu-bar-collapse-width {
너비: 65px;
}
}
</스타일>
메인.뷰
<템플릿>
<div class="컨테이너">
<el-breadcrumb 구분 기호="/" class="breadcrumb">
<el-breadcrumb-item v-for="$route.matched의 항목" :key="item.path">
<a href="www.baidu.com">{
{ item.name }}</a>
</el-breadcrumb-item>
</el-breadcrumb>
<전환 이름="페이드" mode="out-in">
<router-view></router-view>
</전환>
</div>
</템플릿>
<스크립트>
기본값 내보내기 {
데이터() {
반환 {
};
},
방법: {
},
마운트됨() {
}
};
<스타일 범위 lang="scss">
.컨테이너 {
위치: 절대;
상단: 60px;
하단: 0px;
왼쪽: 200px;
오른쪽: 0px;
.breadcrumb {
패딩: 10px;
테두리 색상: rgba(38, 86, 114, 0.2);
테두리 하단 너비: 1px;
테두리 하단 스타일: 단색;
배경: rgba(138, 158, 170, 0.2);
}
}
</스타일>
국제 언어 전환도 LangSelector 구성 요소에 캡슐화되었습니다.
LangSelector/index.js
<템플릿>
<el-dropdown class="lang-selector" @command="handleCommand">
<span class="el-dropdown-link">
<span id="언어">中文</span><i class="el-icon-arrow-down el-icon--right"></i>< 나는=4>
<el-dropdown-menu 슬롯="dropdown">
<el-dropdown-item 명령="zh_cn:中文">중문</el-dropdown-item>
<el-dropdown-item 명령="en_us:English">영어</el-dropdown-item>
</el-드롭다운 메뉴>
</el-드롭다운>
</템플릿>
<스크립트>
기본값 내보내기 {
방법: {
// 语言切换
handlerCommand(명령) {
let array = command.split(':')
let lang = array[0] === '' ? 'zh_cn' : 배열[0]
let label = array[1]
document.getElementById("언어").innerHTML = 라벨
this.$i18n.locale = lang
}
}
}
</스크립트>
구성 요소 캡슐화 및 재구성 후에 라우팅 구성이 동시에 수정됩니다.
'vue'에서 Vue 가져오기
'vue-router'
에서 라우터 가져오기
'@/views/Login'에서 로그인 가져오기
'@/views/404'
에서 NotFound 가져오기
'@/views/Home'
에서 홈 가져오기
'@/views/Intro'
에서 소개 가져오기
'@/views/SysMng/User'에서 사용자 가져오기
'@/views/SysMng/Dept'
에서 부서 가져오기
'@/views/SysMng/Role'에서 역할 가져오기
'@/views/SysMng/Menu'
에서 메뉴 가져오기
'@/views/SysMng/Log'에서 로그 가져오기
Vue.use(라우터)
const 라우터 = 새 라우터({
경로: [
{
경로: '/',
이름: '首页',
구성요소: 홈,
어린이: [
{ 경로: '', 구성 요소: 소개, 이름: '系统介绍' },
{ 경로: '/user', 구성요소: 사용자, 이름: '사용户管理' },
{ 경로: '/dept', 구성요소: 부서, 이름: '机构管理' },
{ 경로: '/role', 구성요소: 역할, 이름: '角color管理' },
{ 경로: '/menu', 구성요소: 메뉴, 이름: '菜单管理' },
{ 경로: '/log', 구성 요소: 로그, 이름: '日志管理' }
]
},
{
경로: '/login',
이름: '登录',
구성요소: 로그인
}
,{
경로: '/404',
이름: 'notFound',
구성요소: NotFound
}
]
})
router.beforeEach((to, from, next) => {
// 登录界면登录成功之后，会把用户信息保存在会话
// 存在时间为会话生命周期，页면关闭即失效。
let user = sessionStorage.getItem('user');
if (to.path == '/login') {
// 如果是访问登录界면，如果用户会话信息存在，代表已登录过，跳转到主页
if(사용자) {
next({ 경로: '/' })
} else {
다음()
}
} else {
// 如果访问비登录界면，且户会话信息不存在，代表未登录，则跳转到登录界면
if (!user) {
next({ 경로: '/login' })
} else {
다음()
}
}
})
기본 라우터 내보내기
테스트 효과
캡슐화 및 재구성 후 시작 인터페이스는 이전과 거의 차이가 없습니다.
