@bbjxl/wxc-search

搜索栏 - 小程序组件

Usage no npm install needed!

<script type="module">
  import bbjxlWxcSearch from 'https://cdn.skypack.dev/@bbjxl/wxc-search';
</script>

README

wxc-search

搜索栏 - 小程序组件

Install

$ min install @bbjxl/wxc-search

API

Search

名称 描述
show-icon [说明]：是否显示 search 图标。
[类型]：Boolean
[默认值]：true
show-clear [说明]：是否显示清除图标。
[类型]：Boolean
[默认值]：true
icon-color [说明]：search 图标的颜色。
[类型]：String
[默认值]：#bbb
ph-color [说明]：placeholder 的颜色。
[类型]：String
[默认值]：#bbb
bg-color [说明]：搜索栏的背景颜色。
[类型]：String
[默认值]：#f6f6f6
color [说明]：搜索栏输入框字体颜色。
[类型]：String
[默认值]：#333
radius [说明]：搜索栏 border-radius。
[类型]：Number
[默认值]：6
placeholder [说明]：搜索栏 placeholder。
[类型]：String
[默认值]：搜索
mode [说明]：搜索栏模式。
[类型]：String
[可选值]：normal，输入模式；static，静态模式，无输入框。
[默认值]：normal
align [说明]：静态模式下搜索栏内容对齐方式。
[类型]：String
[可选值]：left，向左对齐；center，居中。
[默认值]：left
button [说明]：搜索按钮文案。不设置文案时不显示搜索按钮
[类型]：String
[默认值]：""
btn-color [说明]：搜索按钮文字颜色。
[类型]：String
[默认值]：#333
bind:input [说明]：当键盘输入时，触发 input 事件，event.detail = {value, cursor}
bind:confirm [说明]：点击搜索或键盘右下角按钮，触发 confirm 事件，event.detail = {value: value}
bind:submit [说明]：搜索栏组件中内置 form 表单，点击搜索按钮时触发 submit 事件，可用于获取 formId 等，event.detail = {value, formId}

ChangeLog

v1.0.0（2018-4-9）

  • 初始版本