suitSearch 搜索栏

说明

文件搜索栏组件

使用

<template>
	<view class="monitorProjectAllWrapper">
		<suit-search :isSkip="false" @search="search"></suit-search>
	</view>
</template>
<script>
export default {
	data() {
		return {
			result: [], // 搜索结果列表
			num: 0, // 搜索结果数量
		}
	},
	computed: {
		...mapGetters(['getAllLicense'])
	},
	methods: {
		search(val) {
			if (!val) return; 
			let result = this.getAllLicense.filter(item => {
				return item.name.includes(val)
			})
			this.result = result.map(item => {
				return {
					...item,
					iconSrc: '/img/license.png',
					iconWidth: '26',
					iconHeight: '26'
				}
			})
			this.num = this.result.length
		},
	}
}
</script>

参数说明

属性

属性	描述	类型	可选值	默认值
isSkip	是否跳转页面	Boolean	true, false	true
path	跳转页面所需要的路径	String	——	——
params	跳转页面的传参	Array | Object | String	——	——
bgColor	搜索栏背景色	String	——	#ffffff
value	输入框的值	String	——	——

事件

事件名称	说明	回调参数
search	点击搜索按钮触发	val

组件源码及综合示例参考

组件源码 (opens new window) 综合实例 (opens new window)