更新记录
1.0.0(2020-10-19)
下载此版本
发布自定义导航栏、带搜索框、可自定义
平台兼容性
自定义导航栏、带搜索框、可自定义
示例代码
<template>
<view class="container">
<luo-nav-bar leftIcon='back'></luo-nav-bar>
</view>
</template>
<script>
import luoNavBar from '@/components/luo-navBar/luo-navBar.vue';
export default {
data() {
return {
}
},
components:{
luoNavBar
},
onLoad() {
},
methods: {
}
}
</script>
注意事项
isSearch
搜索框设置为true
时,midText
应设为空
使用说明
名称 |
类型 |
默认值 |
描述 |
boxBackColor |
String |
#FFFFFF |
背景颜色 |
color |
String |
#333333 |
文字及图标颜色 |
isBlod |
Boolean |
true |
标题是否加粗 |
fixed |
Boolean |
false |
是否固定顶部 |
setLinDown |
String |
- |
设置下边框,格式'2rpx solid #E6E6E6' |
leftIcon |
String |
- |
左侧按钮图标(图标类型参考 Icon 图标 type 属性) |
lrightIcon |
String |
- |
右侧按钮图标(图标类型参考 Icon 图标 type 属性) |
leftIconSize |
Number |
24 |
左侧图标大小 |
rightIconSize |
Number |
24 |
右侧图标大小 |
leftText |
String |
- |
左侧按钮文本 |
rightText |
String |
- |
右侧按钮文本 |
midText |
String |
- |
标题文本 |
isSearch |
Boolean |
false |
搜索框 |
插槽说明
名称 |
描述 |
left |
导航栏左边插入 |
right |
导航栏右边插入 |
mid |
导航栏中间插入 |
示例代码
<luo-nav-bar>
<view slot="left">left</view>
<view slot="mid">mid</view>
<view slot="right">right</view>
</luo-nav-bar>
事件
名称 |
描述 |
返回值 |
@leftClick |
左侧按钮点击时触发 |
- |
@rightClick |
右侧按钮点击时触发 |
- |
@input |
当为默认搜索框时才有, 当键盘输入时,触发input事件,event.detail = {value} |
第二个值为输入框值 |
@focus |
当为默认搜索框时才有, 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度 |
第二个值为输入框值 |
@blur |
当为默认搜索框时才有, 输入框失去焦点时触发,event.detail = {value: value} |
第二个值为输入框值 |
@confirm |
当为默认搜索框时才有, 点击完成按钮时触发,event.detail = {value: value} |
第二个值为输入框值 |