一、设置公共头部publicHeader.vue
<template>
<view>
<view v-if="sign==0" class="head">
<view class="headText">测试1</view>
</view>
<view v-if="sign==1" class="head">
<view class="headText">{{parent}}</view>
</view>
<view v-if="sign==2" class="head">
<view class="headText">{{parent}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
props: ['sign', 'parent'],
methods: {
}
}
</script>
<style>
.head{
width: 100vw;
height: 64px;
background: #F00;
position: fixed;
z-index: 99;
top: 0;
left: 0;
}
.headText{
height: 44px;
line-height: 44px;
color: #FFFFFF;
text-align: center;
}
</style>
二、设置公共组件publiContent.vue
<template>
<view>
<view class="content">
<view>测试内容</view>
<view>这是一个测试来自publiContent.vue</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content{
text-align: center;
line-height: 40px;
}
</style>
三、公共头部、公共组件的调用
<template>
<view style="height:93vh;overflow-y: scroll;background: #FFFFFF;">
<!-- 一级菜单头头部调用 sign与publicHeader里sign对应,改变sign值可改变头部样式内容 -->
<view style="height: 64px;">
<publicHeaderDiv :sign='1' :parent='headTitles'></publicHeaderDiv>
</view>
<view style="text-align: center;line-height: 35px;">测试江南嘉捷军</view>
<!-- 调用公共组件 -->
<view>
<publiContentDiv></publiContentDiv>
</view>
</view>
</template>
<script>
import publicHeaderDiv from '@/pages/common/publicHeader'//引入
import publiContentDiv from '@/pages/common/publiContent'
export default {
data() {
return {
headTitles:'测试江南嘉捷军头部',//头部内容
}
},
onLoad() {
},
components: {
publicHeaderDiv,publiContentDiv
},
methods: {
}
}
</script>
<style>
</style>