实现效果：
封装的组件：
<template>
<view class="page-container-titleNav">
<view class="content">
<view class="left">
<text>{{title}}</text>
<text class="circle"></text>
</view>
<view class="right" @click="rightHandle" v-if="isShow">
<text>{{rightTitle}}</text>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '标题'
},
rightTitle: {
type: String,
default: '更多'
},
isShow: {
type: Boolean,
default: true
}
},
data() {
return {
}
},
methods: {
rightHandle() {
this.$emit('rightHandle')
}
}
}
</script>
<style lang="scss" scoped>
.page-container-titleNav {
.content {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f7f7f7;
padding: 20rpx;
.left {
position: relative;
font-size: 36rpx;
font-weight: bold;
z-index: 100;
.circle {
display: block;
width: 35rpx;
height: 35rpx;
border-radius: 50%;
background-color: #aa0000;
position: absolute;
top: -10rpx;
right: -15rpx;
opacity: .7;
}
}
.right {
color: $uni-text-color-grey;
font-size: 24rpx;
text {
padding-right: 5rpx;
}
}
}
}
</style>
使用的方法：
<template>
<view>
<title-nav :title="title" @rightHandle='tapTitle'></title-nav>
</view>
</template>
<script>
import titleNav from '@/components/titleNav.vue'
export default {
components: {
titleNav
},
data () {
return {
title: 'this is title'
}
},
methods: {
tapTitle () {
console.log('from click')
}
}
}
</script>
<style></style>
