Search 搜索框

介绍

用于搜索场景的输入框组件。

全局方法：

<!-- 自动聚焦autofocus属性，iOS 系统不支持该属性 -->

<!-- 基本用法 -->
<Search v-model="value" placeholder="请输入搜索关键词"></Search>

<!-- 事件用法 -->
<Search @search="search" @input="input" @focus="focus" @blur="blur"></Search>

<!-- 自定义背景色和圆角 -->
<Search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词"></Search>

<!-- 只读用法 -->
<Search v-model="value" readonly placeholder="请输入搜索关键词"></Search>


<!-- 显示取消按钮用法 -->
<Search v-model="value" show-action placeholder="请输入搜索关键词" @cancel="cancel"></Search>

<!-- 自定义按钮用法 -->
  <Search :show-action="true">
    <template #action>
    <div>搜索</div>
  </template>
  </Search>

局部方法：

<!-- 自动聚焦autofocus属性，iOS 系统不支持该属性 -->

<!-- 基本用法 -->
<Search v-model="value" placeholder="请输入搜索关键词"></Search>

<!-- 事件用法 -->
<Search @search="search" @input="input" @focus="focus" @blur="blur"></Search>

<!-- 自定义背景色和圆角 -->
<Search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词"></Search>

<!-- 只读用法 -->
<Search v-model="value" readonly placeholder="请输入搜索关键词"></Search>


<!-- 显示取消按钮用法 -->
<Search v-model="value" show-action placeholder="请输入搜索关键词" @cancel="cancel"></Search>

<!-- 自定义按钮用法 -->
  <Search :show-action="true">
    <template #action>
    <div>搜索</div>
  </template>
  </Search>

import { Search } from 'lxnuoyan-ui';
export default {
  components: {Search},
};

Search Props

参数	数据类型	默认值	必填	字段名称	备注
v-model	String	空	是	当前搜索值
shape	String	square	否	搜索框形状，可选值为 round
placeholder	String	请输入搜索关键词	否	占位提示文字
disabled	Boolean	false	否	是否禁用输入框
readonly	Boolean	false	否	是否只读
background	String	#f2f2f2	否	搜索框外部背景色
autofocus	Boolean	false	否	是否自动聚焦，iOS 系统不支持该属性
show-action	Boolean	false	否	是否在搜索框右侧显示取消按钮

Search Events

事件名称	数据类型	必填	字段名称	备注
search	function	是	搜索按钮或回车触发回调事件	返回输入内容
input	function	否	输入触发回调事件	返回输入内容
focus	function	否	获取焦点触发回调事件	返回输入内容
blur	function	否	失去焦点触发回调事件	返回输入内容
cancel	function	否	点击取消触发回调事件

Search Slots

名称	说明
left-icon	自定义左侧图标（搜索框内）
action	自定义右侧内容（搜索框外），设置show-action属性后展示