rhb-server/mes-ui/rhb-app/uni_modules/spring-search-box

spring-search-box

SearchBox 搜索框

组件名：spring-search-box

搜索框组件

注意事项 本组件使用了uni-icons, 请在使用前先引用uni-icons组件。 本组件使用了iconfont图标, 如若更换图标，请自行上传iconfont.css进行更换。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<spring-search-box @change="change" @scan="scan"></spring-search-box>

显示右侧扫码或重置按钮

<spring-search-box :showScan="true" :showReset="true"></spring-search-box>

显示左侧标签

<spring-search-box :showLabel="true" :columns="columns" :showLine="true"></spring-search-box>

左侧标签筛选

<spring-search-box :isLabelPicker="true" :columns="columns" :showLine="true"></spring-search-box>

不显示左侧搜索图标

<spring-search-box :showSearch="false" :columns="columns" :isLabelPicker="true"
			:showLine="true"></spring-search-box>

export default {
	data() {
		return {
			columns: [{
					label: '作品名称',
					value: ''
				},
				{
					label: '作品作者',
					value: ''
				}
			]
		}
	},
	methods: {
		change(e) {
			console.log(e);
		},

		scan(e) {
			console.log(e);
		}
	}
}

API

SearchBox Props

| 属性名 | 类型 | 默认值 | 说明 | | | | | columns | Array | - | 标签筛选数据，期望数据格式columns: [{label: '', content:''}...] | | fontSize | String | 30rpx | 字体大小 | | bgColor | String | #D4E5EF | 背景色 | | color | String | #354E6B | 文字颜色及图标颜色 | | height | String | 90rpx | 组件高度，单位 rpx | | padding | String | 0 30rpx | 内边距 | | lineHeight | String | 40rpx | 线条高度 | | placeholder |String | 请输入内容 | placeholder文字 | | placeholderColor|String | #354E6B | placeholder文字颜色 | | showLabel | Boolean | false | 是否显示标签 | | showLine | Boolean | false | 是否显示线条 | | showScan | Boolean | false | 是否显示扫码图标 | | showSearch | Boolean | true | 是否显示搜索图标 | | showReset | Boolean | false | 是否显示重置图标 | | isLabelPicker | Boolean | false | 是否标签筛选 |

|showMonth | Boolean | true | 是否显示月份为背景 |

SearchBox Events

| 事件名 | 说明 |返回值 | | | | | | change | 搜索框输入时、切换标签筛选时、重置时触发 | {columnsIndex: null, inputValue: ''}， columnsIndex为筛选标签的下标 |