Sard

Appearance

100%
在新窗口打开⤴

Search搜索

介绍 ​

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

代码演示 ​

基础使用 ​

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

vue
<template>
  <s-search
    v-model="value"
    placeholder="请输入关键词"
    @input="onInput"
    @change="onChange"
    @search="toast($event)"
  />
</template>

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

const value = ref('')

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

const onChange = (value: any) => {
  console.log('change', value)
}
</script>
vue
<template>
  <s-search
    v-model="value"
    placeholder="请输入关键词"
    @input="onInput"
    @change="onChange"
    @search="toast($event)"
  />
</template>

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

搜索按钮 ​

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

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

<script setup lang="ts">
import { toast } from 'sard'
</script>
vue
<template>
  <s-search placeholder="请输入关键词" search="搜索" @search="toast($event)" />
</template>

<script setup lang="js">
import { toast } from 'sard'
</script>

取消按钮 ​

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

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

<script setup lang="ts">
import { toast } from 'sard'
</script>
vue
<template>
  <s-search placeholder="请输入关键词" cancel="取消" @cancel="toast('取消')" />
</template>

<script setup lang="js">
import { toast } from 'sard'
</script>

形状 ​

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

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

对齐 ​

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

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

背景色 ​

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

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

只读和禁用 ​

只读或禁用后不可输入。

vue
<template>
  <s-search placeholder="只读" readonly />
  <s-search placeholder="禁用" disabled style="margin-top: 20px" />
</template>

插槽 ​

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

vue
<template>
  <s-search placeholder="请输入关键词" shape="round" style="padding-inline-start: 4px">
    <template #prepend>
      <s-button variant="link" size="small" color="secondary" style="margin-inline-end: 4px">
        <demo-icon name="upc-scan" size="16px" />
      </s-button>
    </template>

    <template #input-prepend>
      <s-button variant="link" size="xs" color="secondary">
        <CaretDown />
      </s-button>
    </template>

    <template #input-append>
      <s-button variant="link" size="xs" color="secondary">
        <demo-icon name="camera" size="18px" />
      </s-button>
    </template>
  </s-search>

  <s-search
    placeholder="请输入关键词"
    shape="round"
    style="margin-top: 20px; padding-inline-start: 6px; padding-inline-end: 4px"
  >
    <template #prepend>
      <s-button variant="link" size="xs" color="secondary" style="margin-inline-end: 6px">
        <Left class="text-lg" />
      </s-button>
    </template>

    <template #append>
      <s-button variant="link" size="xs" color="secondary" style="margin-inline-start: 6px">
        <demo-icon name="list-task" size="20px" />
      </s-button>
    </template>
  </s-search>
</template>

<script setup lang="ts">
import { CaretDown, Left } from '@sard/icons'
</script>
vue
<template>
  <s-search placeholder="请输入关键词" shape="round" style="padding-inline-start: 4px">
    <template #prepend>
      <s-button variant="link" size="small" color="secondary" style="margin-inline-end: 4px">
        <demo-icon name="upc-scan" size="16px" />
      </s-button>
    </template>

    <template #input-prepend>
      <s-button variant="link" size="xs" color="secondary">
        <CaretDown />
      </s-button>
    </template>

    <template #input-append>
      <s-button variant="link" size="xs" color="secondary">
        <demo-icon name="camera" size="18px" />
      </s-button>
    </template>
  </s-search>

  <s-search
    placeholder="请输入关键词"
    shape="round"
    style="margin-top: 20px; padding-inline-start: 6px; padding-inline-end: 4px"
  >
    <template #prepend>
      <s-button variant="link" size="xs" color="secondary" style="margin-inline-end: 6px">
        <Left class="text-lg" />
      </s-button>
    </template>

    <template #append>
      <s-button variant="link" size="xs" color="secondary" style="margin-inline-start: 6px">
        <demo-icon name="list-task" size="20px" />
      </s-button>
    </template>
  </s-search>
</template>

<script setup lang="js">
import { CaretDown, Left } from '@sard/icons'
</script>

API ​

SearchProps ​

属性描述类型默认值
model-value输入框值string-
placeholder输入框占位符内容string-
shape输入框形状'round' | 'square''square'
background搜索框外部的背景色string-
input-background搜索框内部的背景色string-
input-color输入框文本颜色string-
disabled禁用状态booleanfalse
readonly只读状态booleanfalse
align输入框文字对齐'left' | 'center' | 'right''left'
cancel定义取消按钮string-
search定义搜索按钮string-
focus获取焦点booleanfalse

SearchSlots ​

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

SearchEmits ​

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

FormExpose ​

属性描述类型
focus手动获取聚焦() => void
blur手动失去聚焦() => void

主题定制 ​

样式变量 ​

CSS 变量值
--s-search-padding-xvar(--s-size-sm)
--s-search-padding-yvar(--s-size-xs)
--s-search-bgvar(--s-bg-color-container)
--s-search-input-bgvar(--s-fill-color-tertiary)
--s-search-input-bg-disabledvar(--s-bg-color-disabled)
--s-search-icon-colorvar(--s-text-color-fourth)
--s-search-icon-font-sizevar(--s-font-size)

Released under the MIT License.

Copyright © 2023-present wuzhitao