1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
| <template>
| <u-navbar
| :bgColor="bgColor"
| :left-icon="leftIcon"
| :leftIconColor="leftIconColor"
| :leftText="leftText"
| :isShowLeft="isShowLeft"
| :placeholder="true"
| :title="displayTitle"
| :titleStyle="titleStyle"
| @leftClick="leftClick"
| >
| <view v-if="rightIcon" class="u-nav-slot" slot="right">
| <u-icon
| :color="rightIconColor"
| @click="rightIconClick"
| :name="rightIcon"
| size="20"
| />
| </view>
| </u-navbar>
| </template>
|
| <script>
| import { navigateBack, navigateToBack, getPageParams } from '@/common/router'
|
| export default {
| name: 'NavBar',
| props: {
| // 标题 - 可以直接传字符串，或从页面参数中读取
| title: {
| type: String,
| default: ''
| },
| // 标题字段名 - 如果从页面参数中读取，指定字段名
| titleKey: {
| type: String,
| default: 'title'
| },
| leftText: {
| type: String,
| default: ''
| },
| leftIconColor: {
| type: String,
| default: '#fff'
| },
| leftIcon: {
| type: String,
| default: 'arrow-left'
| },
| bgColor: {
| type: String,
| default: '#409eff'
| },
| isShowLeft: {
| type: Boolean,
| default: true
| },
| // 自定义返回路径 - 可以是页面键名或路径
| customBack: {
| type: String,
| default: ''
| },
| // 返回方式: navigateBack(默认返回上一页) | navigateTo(跳转到指定页)
| backType: {
| type: String,
| default: 'navigateBack',
| validator: (value) => ['navigateBack', 'navigateTo'].includes(value)
| },
| rightIcon: {
| type: String,
| default: ''
| },
| rightIconColor: {
| type: String,
| default: '#fff'
| }
| },
| data() {
| return {
| pageParams: {}
| }
| },
| computed: {
| // 最终显示的标题
| displayTitle() {
| // 优先使用 props 传入的 title
| if (this.title) {
| return this.title
| }
| // 其次从页面参数中读取
| if (this.pageParams[this.titleKey]) {
| return this.pageParams[this.titleKey]
| }
| return ''
| },
| // 标题样式
| titleStyle() {
| return {
| color: '#fff',
| fontSize: '16px',
| fontWeight: 500
| }
| }
| },
| mounted() {
| // 获取页面参数
| this.pageParams = getPageParams()
| },
| methods: {
| leftClick() {
| // 如果父组件监听了 back 事件，由父组件接管返回逻辑
| if (this.$listeners && this.$listeners.back) {
| this.$emit('back')
| return
| }
| if (this.customBack) {
| navigateToBack(this.customBack)
| } else {
| navigateBack()
| }
| },
| rightIconClick() {
| this.$emit('rightClick')
| }
| }
| }
| </script>
|
| <style scoped>
| .u-nav-slot {
| display: flex;
| align-items: center;
| }
| </style>
|
|
