Search 搜索

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

搜索东西用的

import { DuSearch } from 'dangoui'

注意

在小程序中使用 right 插槽时，如果你传递给 slot 为一个节点并且为 view，请务必给这个 view 添加一个 class

示例

<template>
  <PreviewBlock title="简单">
    <div class="w-full">
      <DuSearch placeholder="Labubu" @confirm="handleConfirm" />
    </div>
  </PreviewBlock>
  <PreviewBlock title="带右侧操作按钮">
    <div class="w-full">
      <DuSearch
        v-model:value="keyword"
        placeholder="Labubu"
        clearable
        @confirm="handleConfirm"
      >
        <template #right>
          <DuIcon name="camera" />
          <DuDivider />
          <DuIcon name="scanning" />
        </template>
      </DuSearch>
    </div>
  </PreviewBlock>
  <PreviewBlock title="滚动 placeholder">
    <div class="w-full">
      <DuSearch v-model:value="keyword2" :placeholder="placeholders" clearable>
        <template #right>
          <DuIcon name="camera" />
          <DuDivider />
          <DuIcon name="scanning" />
        </template>
      </DuSearch>
    </div>
  </PreviewBlock>
  <PreviewBlock title="readonly/滚动 placeholder">
    <div class="w-full">
      <DuSearch :placeholder="placeholders" readonly>
        <template #right>
          <DuIcon name="camera" />
          <DuDivider />
          <DuIcon name="scanning" />
        </template>
      </DuSearch>
    </div>
  </PreviewBlock>
  <PreviewBlock title="readonly/placeholder">
    <div class="w-full">
      <DuSearch placeholder="Molly" readonly>
        <template #right>
          <DuIcon name="camera" />
          <DuDivider />
          <DuIcon name="scanning" />
        </template>
      </DuSearch>
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuSearch, DuIcon, DuDivider } from 'dangoui'

const keyword = ref('')

const placeholders = [
  'Molly',
  'Labubu',
  'Skullpanda'
]

function handleConfirm(value: string) {
  console.log(`[demo] confirm: ${value}`)
}
</script>

API

属性

属性名	类型	默认值	说明
value	`string`	`""`	输入框的值
placeholder	`string \| string[]`	`""`	占位文字，如果为长度大于 1 的数组，会每隔一段时间切换文字
clearable	`boolean`	`false`	是否可清空
bg	`string`	`""`	背景色
readonly	`boolean`	`false`	只读你可能想利用这个组件做到点击切换到另一个页面进行搜索

插槽

名称
left
right

事件

名称	类型
click	`(event: "click", event: any): void`
confirm	`(event: "confirm", value: string): void`
update:value	`(event: "update:value", value: string): void`