介绍

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

引入

import Search from 'sard-uniapp/components/search/search.vue'

代码演示

基础使用

v-model 用于控制搜索框中的文字。

vue lang="ts"

<template>
  <sar-search
    v-model="value"
    placeholder="请输入关键词"
    @input="onInput"
    @change="onChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const onInput = (value: any) => {
  console.log('input', value)
}

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue lang="js"

<template>
  <sar-search
    v-model="value"
    placeholder="请输入关键词"
    @input="onInput"
    @change="onChange"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("");
const onInput = (value2) => {
  console.log("input", value2);
};
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

搜索按钮

使用 search 属性可以添加右侧的按钮，在按钮点击时触发 search 事件。

<template>
  <sar-search
    placeholder="请输入关键词"
    search="搜索"
    @search="toast($event)"
  />
</template>

<script setup lang="ts">
import { toast } from 'sard-uniapp'
</script>

取消按钮

使用 cancel 属性可以添加右侧的按钮，在按钮点击时触发 cancel 事件，并在点击按钮后清空输入框。

<template>
  <sar-search
    placeholder="请输入关键词"
    cancel="取消"
    @cancel="toast('取消')"
  />
</template>

<script setup lang="ts">
import { toast } from 'sard-uniapp'
</script>

形状

设置 shape="round" 可以将输入框变为圆形。

<template>
  <sar-search placeholder="请输入关键词" shape="round" />
</template>

对齐

设置 align="center" 可以将输入内容居中。

<template>
  <sar-search placeholder="请输入关键词" align="center" />
</template>

背景色

通过 background 属性可以设置搜索框外部的背景色。 通过 inputBackground 属性可以设置搜索框内部的背景色。

<template>
  <sar-search
    placeholder="请输入关键词"
    background="var(--sar-red)"
    input-background="var(--sar-white)"
    input-color="var(--sar-black)"
    shape="round"
  />
</template>

只读和禁用

只读或禁用后不可输入。

<template>
  <sar-search placeholder="只读" readonly />
  <sar-search placeholder="禁用" disabled root-style="margin-top: 40rpx" />
</template>

插槽

通过 prepend、append、inputPrepend、inputAppend 插槽可以自定义内容。

<template>
  <sar-search
    placeholder="请输入关键词"
    shape="round"
    root-style="padding-left: 8rpx"
  >
    <template #prepend>
      <sar-button
        type="pale-text"
        size="small"
        theme="neutral"
        root-style="margin-right: 8rpx"
      >
        <sar-icon name="upc-scan" family="demo-icons" size="32rpx" />
      </sar-button>
    </template>

    <template #input-prepend>
      <sar-button type="pale-text" size="mini" theme="neutral">
        <sar-icon name="caret-down" size="28rpx" />
      </sar-button>
    </template>

    <template #input-append>
      <sar-button type="pale-text" size="mini" theme="neutral">
        <sar-icon name="camera" family="demo-icons" size="36rpx" />
      </sar-button>
    </template>
  </sar-search>

  <sar-search
    placeholder="请输入关键词"
    shape="round"
    root-style="margin-top: 40rpx; padding-left: 12rpx; padding-right: 8rpx"
  >
    <template #prepend>
      <sar-button
        type="pale-text"
        size="mini"
        theme="neutral"
        root-style="margin-right: 12rpx"
      >
        <sar-icon name="left" size="32rpx" />
      </sar-button>
    </template>

    <template #append>
      <sar-button
        type="pale-text"
        size="mini"
        theme="neutral"
        root-style="margin-left: 12rpx"
      >
        <sar-icon name="list-task" family="demo-icons" size="40rpx" />
      </sar-button>
    </template>
  </sar-search>
</template>

API

SearchProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
model-value (v-model)	输入框值	string	-
placeholder	输入框占位符内容	string	-
shape	输入框形状	'round' | 'square'	'square'
background	搜索框外部的背景色	string	-
input-background	搜索框内部的背景色	string	-
input-color	输入框文本颜色	string	-
disabled	禁用状态	boolean	false
readonly	只读状态	boolean	false
align	输入框文字对齐	'left' | 'center' | 'right'	'left'
cancel	定义取消按钮	string	-
search	定义搜索按钮	string	-
focus	获取焦点	boolean	false

SearchSlots

插槽	描述	属性
prepend	搜索框前置插槽	-
append	搜索框后置插槽	-
input-prepend	输入框前置插槽	-
input-append	输入框后置插槽	-

SearchEmits

事件	描述	类型
update:model-value	输入框值改变时触发	(value: string) => void
input 1.9.2+	输入框值改变时触发	(value: string) => void
change 1.9.2+	键盘非聚焦状态且内容改变时触发	(value: string) => void
cancel	点击取消按钮时触发	() => void
search	点击确定按钮时触发	(value: string) => void
click	点击组件时触发	(event: any) => void
clear 1.4.1+	点击清除按钮时触发	() => void
focus 1.4.1+	聚焦时触发	(event: any) => void
blur 1.4.1+	失焦时触发	(event: any) => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-search-padding-x: 24rpx;
  --sar-search-padding-y: 16rpx;
  --sar-search-bg: var(--sar-emphasis-bg);

  --sar-search-input-bg: var(--sar-body-bg);
  --sar-search-input-disabled-bg: var(--sar-disabled-shallow-bg);
  --sar-search-icon-color: var(--sar-fourth-color);
}