coolui-scroller

Appearance

当前文档uni-app 版coolui-scroller-uni 改用 原生微信小程序版 →

Search 搜索组件 ​

<coolui-scroller-search> 是搜索框，支持输入、清空、右侧按钮与自定义左侧插槽，常放在 coolui-scroller 的 header 插槽里。

对应原生微信小程序版：Search 搜索组件

代码演示 ​

vue
<template>
  <coolui-scroller-search
    v-model:keyword="keyword"
    placeholder="请输入要搜索的内容"
    :button="{ show: true, text: '搜索' }"
    round
    clearable
    @confirm="onConfirm"
    @btnClick="onBtnClick"
  />
</template>

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

const keyword = ref('')

function onConfirm({ key }: { key: string }) {
  // 回车/确认搜索
}

function onBtnClick({ key }: { key: string }) {
  // 点击右侧按钮
}
</script>
vue
<template>
  <coolui-scroller-search
    v-model:keyword="keyword"
    placeholder="请输入要搜索的内容"
    :button="{ show: true, text: '搜索' }"
    round
    clearable
    @confirm="onConfirm"
    @btnClick="onBtnClick"
  />
</template>

<script>
export default {
  data() {
    return { keyword: '' }
  },
  methods: {
    onConfirm({ key }) {
      // 回车/确认搜索
    },
    onBtnClick({ key }) {
      // 点击右侧按钮
    },
  },
}
</script>

属性 ​

属性说明类型默认值
placeholder占位文字String'请输入要搜索的内容'
button右侧按钮配置 { show, text }Object{ show: false, text: '搜索' }
round是否圆角Booleanfalse
clearable是否显示清空按钮Booleanfalse
keyword搜索内容，支持 v-model:keywordString''

事件 ​

事件说明参数
update:keyword输入内容变化（配 v-model:keyword）keyword: string
input输入中keyword: string
focus / blur聚焦 / 失焦—
btnClick点击右侧按钮{ key }
confirm键盘确认{ key }

插槽 ​

插槽说明
leftout搜索框左侧自定义内容

与原生版的差异 ​

  • 属性改名：原生是 key，而 key 在 Vue 中是保留字，uni-app 版改为 keyword，配合 @update:keyword（可写 v-model:keyword）；
  • 原生 externalClasses（search-btn-class / search-inner-class / search-placeholder-class）已移除，改用 CSS 变量定制主题：
CSS 变量作用
--color文字颜色
--placeholder-color占位文字颜色
--input-bg-color输入框背景色
  • 新增 update:keyword / input / focus / blur 事件；btnClick、confirm 参数与原生一致（{ key }）。

相关 ​