Vue-cli實戰項目13 分離全局配置

上一章節

Vue-cli實戰項目12 側邊導航開發（二）循環和屬性計算器

分離全局配置

第一步、創建config.js文件
script

export default{
	logo:"UNI-ADMIN-SILAS"
}

第二步、在main.js中引入全局變量

第三步，使用變量

完整代碼

layout.js

<template>
	<div>
		<el-container style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;overflow: hidden;">
		  <el-header class="d-flex align-items-center" style="background: #545c64;">
			  <!-- -->
			  <a class="h5 text-light mb-0 mr-auto">{{$conf.logo}}</a>
			  <!-- 頂部導航欄 -->
			  <el-menu
			    :default-active="navBar.active"
			    class="el-menu-demo"
			    mode="horizontal"
			    @select="handleSelect"
			    background-color="#545c64"
			    text-color="#fff"
			    active-text-color="#ffd04b">
				<el-menu-item :index="index|numToString" v-for="(item,index) in navBar.list" :key="index">
					{{item.name}}
				</el-menu-item>
			    <el-submenu index="100">
					<template slot="title">
						<!-- 頭像 -->
						<el-avatar size="small" 
						src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
						</el-avatar>
						silas
					</template>
					<el-menu-item index="100-1">修改</el-menu-item>
					<el-menu-item index="100-2">退出</el-menu-item>
			    </el-submenu>
			  </el-menu>
		  </el-header>
		  <el-container style="height: 100%;padding-bottom: 60px;">
			<!-- 側邊佈局 -->
			<el-aside width="200px">
				<el-menu :default-active="slideMenuActive"  @select="asideSelect">
				  <el-menu-item :index="index|numToString" v-for="(item,index) in slideMenus"
					:key="index">
					<i :class="item.icon"></i>
					<span slot="title" >{{item.name}}</span>
				  </el-menu-item>
				</el-menu>
			</el-aside>
			<!-- 主佈局 -->
			<el-main>
				<li v-for="i in 100" :key="i">{{i}}</li>
			</el-main>
		  </el-container>
		</el-container>
	</div>
</template>

<script>
	import common from '@/common/mixins/common.js';
	export default {
		mixins:[common],
		data() {
		  return {
			navBar:[]
		  };
		},
		created() {
			this.navBar = this.$conf.navBar;
		},
		computed:{
			slideMenuActive:{
				get(){
					return this.navBar.list[this.navBar.active].subActive || '0'
				},
				set(val){
					this.navBar.list[this.navBar.active].subActive = val
				}
			},
			slideMenus(){
				return this.navBar.list[this.navBar.active].submenu || [];
			}
		},
		methods: {
		 handleSelect(key, keyPath) {
			 this.navBar.active = key;
		  },
		  asideSelect(key, keyPath) {
			 this.slideMenuActive = key
		   }
		}
  }
</script>

<style>

</style>

config.js

export default{
	logo:"UNI-ADMIN-SILAS",
	navBar:{
		active:'0',
		list:[
			{
				name:'首頁',
				subActive: '0',
				submenu:[
					{
						icon:"el-icon-s-home",
						name:"後臺首頁"
					},
					{
						icon:"el-icon-s-goods",
						name:"商品列表"
					}
				]
			},
			{
				name:'商品',
				subActive: '0',
				submenu:[
					{
						icon:"el-icon-s-goods",
						name:"商品列表"
					}
				]
			},
			{
				name:'訂單',
				subActive: '0',
				submenu:[
					{
						icon:"el-icon-s-goods",
						name:"訂單列表"
					}
				]
			},
			{name:'會員'},
			{name:'設置'}
		]
	}
}

下一章節