更新记录
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} |
第二个值为输入框值 |