InputSearch 搜索输入框

该组件主要应用于自定义选择的场景，比如：选择用户、选择部门、选择标签等等

基础用法

查看代码

<template>
  <gi-input-search @search="search" @clear="clear"></gi-input-search>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

function search() {
  ElMessage.success('点击了搜索')
}

function clear() {
  ElMessage.warning('点击了清除')
}
</script>

禁用状态

查看代码

<template>
  <el-space direction="vertical" fill style="width: 100%">
    <gi-input-search disabled placeholder="禁用状态" />
    <gi-input-search disabled placeholder="禁用状态" disabled-hide-button />
  </el-space>
</template>

只读状态

查看代码

<template>
  <gi-input-search readonly placeholder="只读状态" />
</template>

API

属性

参数	类型	默认值	说明
model-value / v-model	string	''	绑定值
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
placeholder	string	'请选择'	占位文本
disabled-hide-button	boolean	false	禁用时是否隐藏按钮

事件

事件名	说明	参数
search	点击搜索按钮时触发	-
clear	点击清除按钮时触发	-