Files
learning-system-mobile/components/page-title/page-title.vue
2022-11-24 12:00:29 +08:00

113 lines
2.0 KiB
Vue

<template>
<view class="top">
<view v-show="showBack" class="top-back" @click="toBack()">
<u-icon color="#333" size="20" 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;
background-color: #fff;
display: flex;
// justify-content: space-between;
.top-back{
color: #333;
padding-top:10px;
height: 40px;
line-height: 40px;
padding-left: 15px;
}
.top-title{
text-align: center;
font-size: 16px;
font-weight: 550;
color: #333;
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>