Search 搜索

搜索组件，集成了常见搜索框所需功能。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
modelValue	Number,String	null		All
placeholder	String	请输入关键字	水印	All
placeholderColor	String	c-t-input-placeholder	水印颜色 支持c-t-开头的类(字节跳动系列小程序不支持)	All
radius	String,Number,Array	null	边框	All
searchIcon	String,Object	search	搜索图标	All
clearBtn	Boolean	true	显示清除案例	All
clearIcon	String,Object	error-fill	清除图标 参考c-icon的props	All
cancelBtn	String	auto	显示取消按钮 可选的值always一直显示,auto输入框不为空时显示,none一直不显示	All
cancelText	String,Object	取消	取消文字 参考c-text的props	All
height	Number,String	null	高度	All
center	Boolean	true	默认位置	All
inputBgColor	String	null	输入框背景	All
color	String	null	文字颜色，支持c-t-开头的类	All
fontSize	Number,String	null	文字大小	All
border	Boolean,Object	true	边框 为object时{borderWidth，borderStyle，borderColor}	All
maxlength	Number,String	-1	最大输入长度	All
focus	Boolean	false	自动获取焦点	All
readonly	Boolean	false	是否只读	All
inputWrapStyle	Object	{}	自定义搜索框的样式	All
inputStyle	Object	{}	自定义input的样式	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明
update:modelValue
clear	点击清除按钮时触发，参数{value}
cancel	点击取消按钮时触发，参数{value}
confirm	点击键盘上搜索按钮或enter键时触发，参数{value}
blur	{value}
focus

插槽

插槽名	说明
searchIcon	用于替换默认的搜索图标
clearIcon	用于替换默认的清除图标
default	显示在取消按钮旁边

示例

<template>
    <c-search v-model="keywords" @confirm="onSearch" />
</template>
<script setup>
import { ref } from 'vue'

const keywords = ref('')
function onSearch({value}){
  console.log(value)
}
</script>