···
<cuentaNav line="0px" :textr="'Cerrar sesión'" img="../../static/simba/sesi.png" msg="" active="logout" url="/pages/Login/Login" :rig="false"></cuentaNav>
import cuentaNav from '@/components/cuenta-nav.vue';
export default {
components:{
cuentaNav
}
}
···
以下为组件代码：
···
<template>
<view class="navigator" @click="toUrl(active,url)" :style="'border-bottom:'+line+' solid #979797;'">
<view class="nav-left">
<image v-if="img!=''" mode="widthFix" :src="img"></image>
</view>
<view class="nav-center">
<text v-if="textr">{{textr}}</text>
</view>
<view class="nav-msg">
<text v-if="msg">{{msg}}</text>
</view>
<view class="nav-right">
<image mode="widthFix" src="@/static/simba/nav_right.png" v-if="rig"></image>
</view>
</view>
</template>
<script>
export default {
name: 'cuenta-nav',
props: {
line:{
type:String,
default(){
return '1px';
}
},
active: {
type: String,
default() {
return '';
}
},
url: {
type: String,
default() {
return '';
}
},
img:{
type: String,
default(){
return ''
}
},
textr: {
type: String,
default() {
return '';
}
},
msg: {
type: String,
default() {
return '';
}
},
rig:{
type: Boolean,
default(){
return true
}
}
},
methods:{
toUrl(active,url){
if(active!=''){
uni.$emit(active,url)
}else if(url!=''){
uni.navigateTo({
url:url
})
}
}
}
}
</script>
<style>
.navigator{
width: 90%;
height: 92rpx;
margin-left: 5%;
border-bottom: 1px solid #979797;
display: flex;
}
.nav-left{
width:40rpx;
height: inherit;
display: flex;
text-align: right;
flex-direction: column;
justify-content: center;
}
.nav-left image{
width: 75%;
height: inherit;
}
.nav-center{
flex:1;
font-size:27rpx;
color: #333333;
line-height:100rpx;
font-weight: bold;
}
.nav-msg{
display: flex;
text-align: right;
flex-direction: column;
justify-content: center;
}
.nav-msg text{
background-image:linear-gradient(to right bottom,#FF2D61,#FB7F00) ;
padding: 0 12rpx;
font-style: italic;
color: #FFFFFF;
border-radius: 20rpx;
font-size:19.18rpx;
margin-right:18rpx;
}
.nav-right{
width:19rpx;
height: inherit;
display: flex;
text-align: right;
flex-direction: column;
justify-content: center;
}
.nav-right image{
width: 100%;
height: inherit;
}
</style>
···
