bz-search 搜索框

基本用法

搜索框

扫码预览

用BoosHi扫码或PC端点击

<template>
  <view class="demo-ui-page">
    <view class="demo-content">
      <view class="demo-title">bz-search 搜索框</view>
      <demo-cell>
        <bz-search></bz-search>
      </demo-cell>
      <demo-cell
        title="圆角类型"
        subTitle="isRound centerPlaceholder showIcon=false"
      >
        <bz-search isRound centerPlaceholder :showIcon="false"></bz-search>
      </demo-cell>
      <demo-cell title="快捷清除内容" subTitle="clearable bgColor='#e3ecff'">
        <bz-search v-model="value1" clearable bgColor="#e3ecff"></bz-search>
      </demo-cell>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value1: "默认内容",
    };
  },
};
</script>

展开 刷新 关闭

属性说明

属性名	类型	默认值	可选值	说明
value(v-model)	String	-	-	当前填写内容
isRound	Boolean	false	-	是否为圆角搜索框
showIcon	Boolean	true	-	是否展示搜索图标
isRight	Boolean	false	-	是否搜索框文本右对齐
clearable	Boolean	true	-	是否使用清空图标快捷清空
placeholder	String	'请输入搜索内容'	-	提示文本
centerPlaceholder	Boolean	false	-	是否居中提示文本
bgColor	String	-	-	输入框背景颜色
focus	Boolean	false	-	是否自动聚焦
@onEnter	Handler	-	-	回车确认后回调
@onBlur	Handler	-	-	失去焦点时触发事件
@onFocus	Handler	-	-	聚焦时触发事件
@clear	Handler	-	-	点击清除图标是触发事件
@change	Handler	-	-	数据改变是触发事件