Files
learning-system-mobile/components/page-title/page-title.vue
2022-11-17 11:35:39 +08:00

115 lines
2.1 KiB
Vue

<template>
<view class="top">
<view v-show="showBack" class="top-back" @click="toBack()">
<u-icon name="arrow-left"></u-icon>
</view>
<view class="top-title"><slot></slot></view>
<view @click="topgae()" style="color: #387DF7;">
<slot name="right"></slot>
</view>
</view>
</template>
<script>
export default {
props:{
backUrl:{
type:String,
default:''
},
showBack:{
type:Boolean,
default:false
},
goPgae:{
type:String,
default:''
}
},
data() {
return {
}
},
methods: {
topgae() {
if(this.goPgae!=''){
uni.navigateTo({
url:this.goPgae
});
}
},
toBack(){
if(this.backUrl!=''){
if(this.backUrl == '/pages/my/index'){
uni.switchTab({
url:this.backUrl
})
}else{
uni.navigateTo({
url:this.backUrl
});
}
}else{
let pages =getCurrentPages();
//console.log(pages);
const prevPage=pages[pages.length-2];
if(!prevPage){
uni.switchTab({
url:'/pages/index/index'
})
}else{
uni.navigateBack();
}
}
}
}
}
</script>
<style lang="scss" scoped>
.top{
height: 40px;
// display: none;
// background:linear-gradient(to bottom,#6BA0FC, #6297FD);
background-color: #fff;
display: flex;
justify-content: space-between;
.top-back{
// float: left;
color: #000;
padding-top:6px;
height: 40px;
line-height: 40px;
// padding-left: 15px;
}
.top-title{
text-align: center;
font-size: 16px;
color: #000;
height: 40px;
text-align: center;
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 40px;
}
}
// .arrow:before {
// content: " ";
// display: inline-block;
// -webkit-transform: rotate(45deg);
// -ms-transform: rotate(45deg);
// transform: rotate(45deg);
// height: .5rem;
// width: .5rem;
// border-width: 0 0 2px 2px;
// border-color: #FFFFFF;
// border-style: solid;
// position: relative;
// top: 0
// }
</style>