vue 创建公用的头部和底部

叁歲伎倆 2023-06-15 07:13 11阅读 0赞

1.创建head.vue和foot.vue文件 (在这之前我们要引入 Mint UI [查看Mint UI引入的方式][Mint UI])  
head.vue文件

<template>
    	<div id="head">
            <mt-header :title="title">
    		  	<router-link to="" slot="left" v-if="!goBackBtn">
    		    	<mt-button icon="back"  @click.native="$router.back(-1)"></mt-button>
    		  	</router-link>
    	  		<mt-button @click="linkTo(url)" slot="right">{ { name}}</mt-button>
    		</mt-header>
        </div>
    </template>
    
    <script>
    	export default { 
    		name: "Head",
            data() { 
                return { 
    				
                }
            },
            props:['title','goBackBtn','show','name','url'],
            methods:{ 
            	linkTo: function(url) { 
            		this.$router.push({  path:url  })
            	}
            }
        }
    </script>
    
    <style scoped>
    	#head{ 
    		width: 100%;height: 40px;position: fixed;top: 0;left: 0;z-index: 9999;
    	}
        .mint-header{ 
        	background-color: #fa4330;height: 45px;
        }
    </style>

foot.vue

<template>
    	<mt-tabbar v-model="message" fixed>
    	  <mt-tab-item id="首页">
    	    <img slot="icon" :src="this.atabs[0]">
    	    首页
    	  </mt-tab-item>
    	  <mt-tab-item id="已接任务">
    	    <img slot="icon" :src="this.atabs[1]">
    	    已接任务
    	  </mt-tab-item>
    	  <mt-tab-item id="任务大厅">
    	    <img slot="icon" :src="this.atabs[2]">
    	    任务大厅
    	  </mt-tab-item>
    	  <mt-tab-item id="申诉中心">
    	    <img slot="icon" :src="this.atabs[3]">
    	    申诉中心
    	  </mt-tab-item>
    	  <mt-tab-item id="我的">
    	    <img slot="icon" :src="this.atabs[4]">
    	    我的
    	  </mt-tab-item>
    	</mt-tabbar>
    </template>
    
    <script>
    	export default { 
            data() { 
                return{ 
                	//选中的tabbar值message为外面页面传入的值selected
    			    message:this.selected,
    			    //这里使用的icon图标为图片，所以需要加图片改变的传入，若使用阿里图标，则不用加
    			    atabs:this.tabs,
                }
            },   
            props:{ 
            	selected: String,
    			tabs:Array,
           },
            watch: { 
    		    message: function (val, oldVal) { 
    		      // 这里就可以通过 val 的值变更来确定去向
    		      switch(val){ 
    		        case '首页':
    		          this.$router.push('/Home');
    		        break;
    		        case '已接任务':
    		          this.$router.push('/Task');
    		        break;
    		        case '任务大厅':
    		          this.$router.push('/Hall');
    		        break;
    				case '申诉中心':
    		          this.$router.push('/Mine');
    		        break;
    				case '我的':
    		          this.$router.push('/Mine');
    		        break;
    		      }
    		    }
    	  	},
            methods: { 
                
            }
        }
    </script>
    
    <style scoped>
    	.mint-tabbar.is-fixed{ 
    		background: #FFFFFF;
    		border-top: 1px solid #e5e5e5;
    	}
    	.mint-tab-item{ 
    		color: #909090;
    	}
        .mint-tabbar > .mint-tab-item.is-selected{ 
        	background-color: transparent;color: #fa4330;
        }
    </style>

2.在main.js中挂载并注册文件

import vHeader from './components/Head.vue'
    import vFoot from './components/Foot.vue'
    Vue.component('v-head',vHeader)
    Vue.component('v-foot',vFoot)

3.引用组件

<v-head :title="headTitle" :goBackBtn="goBackBtn" :name="name" :url="url"></v-head>
    <v-foot :selected="selected" :tabs='tabs'></v-foot>
    
    export default { 
    	name: '',
    	data(){ 
    		return{ 
    			headTitle: "任务大厅",
    			goBackBtn: true,
    			name: '接单设置',
    			selected:"任务大厅",
    			url:'/SetUp',
    			tabs:[
    			      	require("../assets/foot-icon/home01.png"),require("../assets/foot-icon/task01.png"),
    			        require("../assets/foot-icon/hall02.png"),require("../assets/foot-icon/core01.png"),require("../assets/foot-icon/my01.png")
    		     	]
    		}
    	}
    }

[Mint UI]: http://mint-ui.github.io/docs/#/zh-cn2/quickstart