SearchBar 搜索条

效果

使用方法

<template>
	<div style="background:#f6f6f6">
        <lc-title title="搜索栏"></lc-title>
        <category title="基本用法"></category>
		<div class="demo1">
    		<lc-searchbar></lc-searchbar>
    	</div>
		<p>右侧搜索按钮可根据需要进行配置</p>
    	<div class="demo1">
    		<lc-searchbar
		        placeText="请输入自定义文案"
		        :hasSearchButton="false"
	        ></lc-searchbar>
    	</div>
    	<p>可配置输入框前面是否显示搜索图标、右侧是否显示文字按钮、显示文字、自定义 class</p>
    	<div class="demo1">
    		<lc-searchbar
		        placeText="ERP/姓名/邮箱"
		        :hasIcon="true"
		        :hasTextButton="true"
		        customClass="search_demo"
	        ></lc-searchbar>
    	</div>
        <category title="事件"></category>
        <div class="demo1">
            <lc-searchbar
		        placeText="请输入自定义文案"
		        @focus="focusFun"
		        @input="inputFun"
		        @blur="blurFun"
		        @submit="submitFun"
	        ></lc-searchbar>
        </div>
    </div>
</template>
<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
	components: { LcTitle, Category },
	methods:{
		focusFun() {
			console.log('获取焦点操作！');
		},
		inputFun(value) {
			console.log(value);
			console.log('您正在输入...');
		},
		blurFun(value) {
			console.log(value);
			console.log('您已失去焦点！');
		},
		submitFun(value) {
			console.log(value);
			console.log('默认提交操作！');
		}
	}
}
</script>
<style lang="less" scoped>
	.demo1 {
		padding: 10px;
		background: #fff;
    }
    p{ line-height: 26px; padding:10px; font-size: 14px;}
</style>

可配置参数

字段	说明	类型	默认值
hasIcon	是否显示输入框前面的 icon	Boolean	false
placeText	输入框 placeholder 内容	String	‘请输入内容…’
hasSearchButton	是否显示右侧搜索按钮	Boolean	true
hasTextButton	右侧搜索按钮是否为文字按钮	Boolean	false
textInfo	右侧文字搜索按钮文案	String	‘搜索’
customClass	自定义 class	String	‘’
searchIconSize	Search 图标的尺寸	String	‘20px’
searchIconColor	Search 图标的颜色	String	‘#2e2d2d’
searchBtnIconSize	搜索按钮图标的尺寸	String	‘20px’
searchBtnIconColor	搜索按钮图标的颜色	String	‘#2e2d2d’
clearIconSize	清空按钮图标的尺寸	String	‘15px’
clearIconColor	清空按钮图标的颜色	String	‘#2e2d2d’

事件回调

字段	说明	回调参数
focus	输入框获取焦点时触发事件	无
input	输入框输入内容时触发事件	无
blur	输入框失去焦点时触发事件	无
submit	默认提交事件，点击右侧Icon或文字也会触发	无