@@ -27,7 +27,7 @@ app.use(TabPane);
27
27
<div >返回</div >
28
28
</template >
29
29
<template #right >
30
- <nut-icon class = " right " name = " share-n " ></nut-icon >
30
+ <ShareN width = " 16px " ></ShareN >
31
31
</template >
32
32
</nut-navbar >
33
33
@@ -46,18 +46,23 @@ app.use(TabPane);
46
46
@on-click-icon =" icon"
47
47
@on-click-right =" rightClick"
48
48
title =" 购物车"
49
- titleIcon =" cart2 "
49
+ : titleIcon =" true "
50
50
desc =" 编辑"
51
51
>
52
+ <template #titleIcon >
53
+ <Cart2 width =" 16px" ></Cart2 >
54
+ </template >
52
55
<template #right >
53
- <nut-icon class =" right" name = " more-x " ></nut-icon >
56
+ <MoreX class =" right" width = " 16px " ></MoreX >
54
57
</template >
55
58
</nut-navbar >
56
59
</template >
57
60
58
61
<script lang =" ts" >
59
62
import { ref } from ' vue' ;
63
+ import { ShareN , Cart2 , MoreX } from ' @nutui/icons-vue' ;
60
64
export default {
65
+ components: { ShareN, Cart2, MoreX },
61
66
setup () {
62
67
const methods = {
63
68
back () {
@@ -100,14 +105,16 @@ app.use(TabPane);
100
105
</template >
101
106
102
107
<template #right >
103
- <nut-icon class =" right" name = " more-x " ></nut-icon >
108
+ <MoreX class =" right" width = " 16px " ></MoreX >
104
109
</template >
105
110
</nut-navbar >
106
111
</template >
107
112
108
113
<script lang =" ts" >
109
114
import { ref } from ' vue' ;
115
+ import { MoreX } from ' @nutui/icons-vue' ;
110
116
export default {
117
+ components: { MoreX },
111
118
setup () {
112
119
const tab1value = ref (0 );
113
120
const methods = {
@@ -148,19 +155,18 @@ export default {
148
155
<nut-tab-pane title =" 标题3" > </nut-tab-pane >
149
156
</nut-tabs >
150
157
</template >
151
- <template #icons >
152
- <nut-icon class =" icon" name =" share" ></nut-icon >
153
- </template >
154
158
155
159
<template #right >
156
- <nut-icon class =" right" name = " horizontal-n " ></nut-icon >
160
+ <HorizontalN class =" right" width = " 16px " ></HorizontalN >
157
161
</template >
158
162
</nut-navbar >
159
163
</template >
160
164
161
165
<script lang =" ts" >
162
166
import { ref } from ' vue' ;
167
+ import { HorizontalN } from ' @nutui/icons-vue' ;
163
168
export default {
169
+ components: { HorizontalN },
164
170
setup () {
165
171
const tab2value = ref (0 );
166
172
const methods = {
@@ -190,7 +196,7 @@ export default {
190
196
| left-text | 左侧文案 | String | - |
191
197
| desc | 右侧描述 | String | - |
192
198
| left-show | 是否展示左侧箭头 | Boolean | false |
193
- | title-icon | 标题中插入icon | String | - |
199
+ | title-icon | 标题中是否展示icon | Boolean | false |
194
200
| border | 是否显示下边框 | Boolean | false |
195
201
| fixed | 是否固定到顶部 | Boolean | false |
196
202
| placeholder | 固定在顶部时,是否在标签位置生成一个等高的占位元素 | Boolean | false |
@@ -212,6 +218,8 @@ export default {
212
218
| left | 自定义左侧内容 | |
213
219
| right | 自定义右侧内容 | |
214
220
| content | 自定义导航栏中间内容 | |
221
+ | leftShow | 左侧箭头自定义图标 |
222
+ | titleIcon | 标题中自定义图标 |
215
223
216
224
## 主题定制
217
225
@@ -232,4 +240,4 @@ export default {
232
240
| --nut-navbar-title-font-weight| _ 0_ | - |
233
241
| --nut-navbar-title-font-color| _ var(--nut-navbar-color)_ | - |
234
242
| --nut-navbar-title-width| _ 100px_ | - |
235
- | --nut-navbar-title-icon-margin| _ 0 0 0 13px_ | - |
243
+ | --nut-navbar-title-icon-margin| _ 0 0 0 13px_ | - |
0 commit comments