搜索栏 Search | iui Design 一款基于Vue3的Uniapp组件库

用于用户输入搜索信息，并进行页面内容搜索。

基本使用

搜索框的基础使用

html

<iui-search v-model="inputValue"></iui-search>

<iui-search v-model="inputValue"></iui-search>

自定义背景颜色

html

<iui-search
  color="white"
  bgColor="linear-gradient(45deg, rgb(22, 93, 255), rgb(26 49 219))"
>
</iui-search>

<iui-search
  color="white"
  bgColor="linear-gradient(45deg, rgb(22, 93, 255), rgb(26 49 219))"
>
</iui-search>

自定义前缀和后缀

html

<iui-search>
  <template #prefix>
    <iui-avatar />
  </template>
  <template #suffix>
    <iui-button type="primary">Search</iui-button>
  </template>
</iui-search>

<iui-search>
  <template #prefix>
    <iui-avatar />
  </template>
  <template #suffix>
    <iui-button type="primary">Search</iui-button>
  </template>
</iui-search>

API

<Search>props

参数	描述	类型	默认值
modelValue (v-model)	搜索框的值	String	-
placeholder	占位提示文字	String	-
icon	搜索框左侧图标, 为Boolean类型时, 控制显隐, 为String类型时, 为自定义图标	String \| Boolean	search
bgColor	背景颜色	String	white
color	取消按钮文字颜色	String	#165DFF
cancel	是否显示取消按钮	Boolean	true

<Search>events

事件名	描述	参数
search	点击搜索按钮时触发	value: ModelValue

<Search>slots

插槽名	描述	参数
prefix	搜索框左侧插槽	-
suffix	搜索框右侧插槽	-

基本使用 ​

自定义背景颜色 ​

自定义前缀和后缀 ​

API ​

基本使用

自定义背景颜色

自定义前缀和后缀

API