コンポーネントのカプセル化
コンポーネント コードの肥大化を避けるために、主要な機能コンポーネントがここにカプセル化され、コードのモジュール性と単純さが確保されます。
コンポーネントの構造
コンポーネントのカプセル化と再構築後のコンポーネント構造は次の図のようになります。
コードの概要
ホーム コンポーネントは簡略化されており、ナビゲーション、ヘッダー、メイン コンテンツの 3 つのコンポーネントが含まれています。
Home.vue
<テンプレート>
<div class="コンテナ">
<!-- 导航菜单栏 -->
<メニューバー></メニューバー>
<!-- 头部エリア -->
<ヘッドバー></ヘッドバー>
<!-- メインコンテンツ領域 -->
<メイン></メイン>
</div>
</template>
<スクリプト>
HeadBar を「./HeadBar/HeadBar」からインポートします
MenuBar を「./MenuBar/MenuBar」からインポートします
Main を「./Main/Main」からインポートします
デフォルトをエクスポート {
コンポーネント:{
ヘッドバー、
メニューバー、
メイン
}
};
</script>
<stylescoped lang="scss">
.container {
位置: 絶対;
上: 0px;
左: 0px;
右: 0px;
背景: #4b5f6e;
}
</style>
ヘッドバー.vue
<テンプレート>
<div class="コンテナ">
<!-- 导航菜单隐藏显示切换 -->
<span class="collapse-switcher" @click.prevent="折りたたむ">
<i class="el-icon-menu"></i>
</span>
<!-- 导航菜单 -->
<span class="ナビゲーションバー">
<el-menu :default-active="activeIndex" class="el-menu-demo" text-color="#fff"
アクティブテキストカラー="#ffd04b"モード="水平" @select="selectNavBar()">
<el-menu-itemindex="1" @click="$router.push('/')">{
{$t("common.home")}}</ el-menu-item>
<el-menu-itemindex="2">{
{$t("common.doc")}}</el-menu-item>{$t("common.msgCenter")}}</el-menu-item>
折りたたみ: function() {
}、
this.$i18n.locale = lang
document.getElementById("言語").innerHTML = label
let label = array[1]
let lang = array[0] === '' ? 'zh_cn' : 配列[0]
let array = command.split(':')
handleCommand(コマンド) {
// 言説切换
}、
console.log(key, keyPath)
selectNavBar(key, keyPath) {
メソッド: {
}、
};
アクティブインデックス:'1'
ユーザーアバター: ""、
ユーザー名: 「ルイ」、
isCollapse: false、
戻り値 {
data() {
}、
LangSelector
テーマピッカー、
コンポーネント:{
デフォルトをエクスポート {
LangSelector を「@/components/LangSelector」からインポートします
「@/components/ThemePicker」から ThemePicker をインポートします
「@/mock/index.js」からモックをインポートします;
<スクリプト>
</template>
</div>
</span>
</el-dropdown>
</el-dropdown-menu>{$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 slot="ドロップダウン">{ユーザー名}}</span>
<span class="el-dropdown-link"><img :src="this.userAvatar" /> {
<el-dropdown class="ユーザー情報ドロップダウン"トリガー="ホバー">
<!-- 用户信息 -->
<LangSelector class="lang-selector"></LangSelector>
<!-- 言説切换 -->
<ThemePicker class="theme-picker"></ThemePicker>
<!-- 主题切换 -->
<span class="ツールバー">
</span>
</el-menu>
<el-menu-itemindex="3">{
//折叠导航栏
this.isCollapse = !this.isCollapse;
}、
//退出登录
ログアウト: function() {
var _this = this;
this.$confirm("确认退出吗?", "提案", {
タイプ: "警告"
})
.then(() => {
sessionStorage.removeItem("user");
this.$router.push
("/login");
})
.catch(() => {});
}
}、
mount() {
this.sysName = "キティが好き";
var user = sessionStorage.getItem("user");
if (ユーザー) {
this.userName = ユーザー;
this.userAvatar = require("@/assets/user.png");
}
}
};
</script>
<stylescoped lang="scss">
.container {
位置: 絶対;
左: 200 ピクセル;
右: 0px;
高さ: 60px;
行の高さ: 60px;
.collapse-switcher {
幅: 40px;
浮動小数点: 左;
カーソル: ポインタ;
境界線の色: rgba(111, 123, 131, 0.8);
border-left-width: 1px;
border-left-style: ソリッド;
border-right-width: 1px;
border-right-style: ソリッド;
色: 白;
背景: #504e6180;
}
.nav-bar {
マージン左: 自動;
浮動小数点: 左;
.el-menu {
背景: #504e6180;
}
}
.tool-bar {
浮動小数点: 右;
.テーマピッカー {
パディング右: 10px;
}
.lang-selector {
パディング右: 10px;
フォントサイズ: 15px;
色: #fff;
カーソル: ポインタ;
}
.user-info-dropdown {
フォントサイズ: 20px;
パディング右: 20px;
色: #fff;
カーソル: ポインタ;
img {
幅: 40px;
高さ: 40px;
境界半径: 10px;
マージン: 10px 0px 10px 10px;
浮動小数点: 右;
}
}
}
}
</style>
MenuBar.vue
<テンプレート>
<div class="メニューバーコンテナ">
<!-- ロゴ -->
<div class="ロゴ" :class="isCollapse?'menu-bar-collapse-width':'menu-bar-width'">
<img :src=「このロゴ」 /> <div>{
{isCollapse?'':sysName}}</div>
</div>
<!-- 导航菜单 -->
<el-menu デフォルト-アクティブ="1-1" :class="isCollapse?"メニューバー-折りたたみ幅":"メニューバー幅"" @open=「ハンドルオープン」 @close=「ハンドルクローズ」 @select="ハンドルセレクト" :collapse="isCollapse">
<el-submenuindex="1">
<テンプレート スロット="タイトル">
<i class="el-icon-location"</i>
<span slot="title">{
{$t("sys.sysMng")}}</span>
</template>
<el-menu-itemindex="1-1" @click="$router.push('user')">{
{$t("sys.userMng")}}</el -menu-item>
<el-menu-itemindex="1-2" @click="$router.push('dept')">{
{$t("sys.deptMng")}}</el -menu-item>
<el-menu-itemindex="1-3" @click="$router.push('role')">{
{$t("sys.roleMng")}}</el -menu-item>
<el-menu-itemindex="1-4" @click="$router.push('menu')">{
{$t("sys.menuMng")}}</el -menu-item>
<el-menu-itemindex="1-5" @click="$router.push('log')">{
{$t("sys.logMng")}}</el -menu-item>
</el-submenu>
<el-submenuindex="2">
<テンプレート スロット="タイトル">
<i class="el-icon-location"<</i>
<span slot="title">{
{$t("sys.sysMonitor")}}</span>
</template>
</el-submenu>
<el-menu-itemindex="3"無効>
<i class="el-icon-document"></i>
<span slot="title">{
{$t("sys.nav3")}}</span>
</el-menu-item>
<el-menu-itemindex="4">
<i class="el-icon-setting"</i>
<span slot="title">{
{$t("sys.nv4")}}</span>
</el-menu-item>
</el-menu>
</div>
</template>
<スクリプト>
デフォルトをエクスポート {
data() {
戻り値 {
isCollapse: false、
sysName: ""、
ロゴ: ""、
};
}、
メソッド: {
handleopen() {
console.log('handleopen');
}、
handleclose() {
console.log('handleclose');
}、
ハンドル選択(a, b) {
console.log('handleselect');
}
}、
mount() {
this.sysName = "キティが好き";
this.logo = require("@/assets/logo.png");
}
};
</スクリプト>
<stylescoped lang="scss">
.menu-bar-container {
.el-menu {
位置: 絶対;
上: 60 ピクセル;
下: 0px;
text-align: left;
}
.logo {
位置: 絶対;
上: 0px;
高さ: 60ピクセル;
行の高さ: 60px;
背景: #4b5f6e;
img {
幅: 40px;
高さ: 40px;
境界半径: 0px;
マージン: 10 ピクセル 10 ピクセル 10 ピクセル 10 ピクセル;
浮動小数点: 左;
}
div {
フォントサイズ: 22px;
色: 白;
text-align: left;
}
}
.menu-bar-width {
幅: 200px;
}
.menu-bar-collapse-width {
幅: 65px;
}
}
</style>
メインビュー
<テンプレート>
<div class="コンテナ">
<el-breadcrumb-item v-for="$route.matched のアイテム" :key="アイテム.パス">
<a href="www.baidu.com">{
{ item.name }}</a>
</el-breadcrumb-item>
</el-ブレッドクラム>
<トランジション名=「フェード」モード="アウト-イン">
<router-view></router-view>
</transition>
</div>
</template>
<スクリプト>
デフォルトをエクスポート {
data() {
戻り値 {
};
}、
メソッド: {
}、
mount() {
}
};
</script>
<stylescoped lang="scss">
.container {
位置: 絶対;
上: 60 ピクセル;
下: 0px;
左: 200 ピクセル;
右: 0px;
.ブレッドクラム {
パディング: 10px;
境界線の色: rgba(38, 86, 114, 0.2);
border-bottom-width: 1px;
border-bottom-style: ソリッド;
背景: rgba(138, 158, 170, 0.2);
}
}
</style>
国際言語切り替えもコンポーネント LangSelector にカプセル化されています。
LangSelector/index.js
<テンプレート>
<el-dropdown class="lang-selector" @command="handleCommand">
<span class="el-dropdown-link">
<span id=" language">中文</span><i class="el-icon-arrow-down el-icon--right"></i>< a i=4>
</span>
<el-dropdown-menu slot="ドロップダウン">
<el-dropdown-item command="zh_cn:中文">中文</el-dropdown-item>
<el-dropdown-item command="en_us:English">English</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<スクリプト>
デフォルトをエクスポート {
メソッド: {
// 言説切换
handleCommand(コマンド) {
let array = command.split(':')
let lang = array[0] === '' ? 'zh_cn' : 配列[0]
let label = array[1]
document.getElementById("言語").innerHTML = label
this.$i18n.locale = lang
}
}
}
</スクリプト>
コンポーネントのカプセル化と再構築後、ルーティング設定も同時に変更されます。
「vue」から Vue をインポート
'vue-router' からルーターをインポート
'@/views/Login' からログインをインポート
NotFound を '@/views/404' からインポート
'@/views/Home'
からホームをインポート
'@/views/Intro' からイントロをインポート
'@/views/SysMng/User'
からユーザーをインポート
'@/views/SysMng/Dept'
から部門をインポートします
'@/views/SysMng/Role'
からロールをインポートします
'@/views/SysMng/Menu' からメニューをインポート
'@/views/SysMng/Log' からログをインポート
Vue.use(ルーター)
const router = 新しい Router({
ルート: [
{
パス: '/'、
名前: '首页'、
コンポーネント: ホーム、
子供: [
{ パス: ''、コンポーネント: イントロ、名前: 'システム介绍' }、
{ パス: '/user'、コンポーネント: ユーザー、名前: '用户管理' }、
{ パス: '/dept'、コンポーネント: Dept、名前: '机构管理' }、
{ パス: '/role'、コンポーネント: ロール、名前: '角色管理' }、
{ パス: '/menu'、コンポーネント: メニュー、名前: '菜单管理' }、
{ パス: '/log'、コンポーネント: Log、名前: '日志管理' }
]
}、
{
パス: '/login'、
名前: '登录'、
コンポーネント: ログイン
}
、{
パス: '/404'、
名前: 'notFound'、
コンポーネント: 見つかりません
}
]
})
router.beforeEach((to、from、next) => {
// 登录界面登录成功後、会户信息保存在会话
// 会議ライフサイクルの期間、一時的に失効が発生します。
let user = sessionStorage.getItem('user');
if (to.path == '/login') {
// ログイン インターフェースの場合、使用者会議话情報が存在する場合、すでに登録を代表し、メイン画面にジャンプします。
if(ユーザー) {
next({ パス: '/' })
} else {
next()
}
} else {
// ログイン インターフェイスが非登録であり、户会话情報が存在しない場合、未登録を表すため、ログイン インターフェイスにジャンプします
if (!user) {
next({ path: '/login' })
} else {
next()
}
}
})
デフォルトルーターをエクスポート
テスト効果
カプセル化と再構築後の起動インターフェイスは、以前とほとんど変わりません。
