Files
learning-system-mobile/components/page-title/page-title.vue
2022-11-04 16:36:11 +08:00

97 lines
1.7 KiB
Vue

<template>
<view class="top">
<view v-show="showBack" class="back" @click="toBack()">
<text class="arrow"></text>
</view>
<view class="title"><slot></slot> </view>
</view>
</template>
<script>
export default {
props:{
backUrl:{
type:String,
default:''
},
showBack:{
type:Boolean,
default:false
}
},
data() {
return {
}
},
methods: {
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;
.back{
float: left;
color: #000;
padding-top:8px;
padding-left: 15px;
}
.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>