@wines/search-bar v1.5.1

@wines/search-bar

SearchBar 搜索栏

用于展现搜索栏，提醒用户输入相关内容进行搜索。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "SearchBar",
  "usingComponents": {
    "wux-search-bar": "@wines/search-bar"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">SearchBar</view>
		<view class="page__desc">搜索栏</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">Normal</view>
		<wux-search-bar clear maxlength="8" />
		<view class="sub-title">Focus</view>
		<wux-search-bar clear focus />
		<view class="sub-title">Show cancel button</view>
		<wux-search-bar
		 clear
		 show-cancel
		 value="{{ value }}"
		 controlled
		 placeholder="Search"
		 bind:change="onChange"
		 bind:focus="onFocus"
		 bind:blur="onBlur"
		 bind:confirm="onConfirm"
		 bind:clear="onClear"
		 bind:cancel="onCancel"
		/>
	</view>
</view>

import './index.less';

Page({
  data: {
    value: '',
  },
  onChange(e) {
    console.log('onChange', e);
    this.setData({
      value: e.detail.value,
    });
  },
  onFocus(e) {
    console.log('onFocus', e);
  },
  onBlur(e) {
    console.log('onBlur', e);
  },
  onConfirm(e) {
    console.log('onConfirm', e);
  },
  onClear(e) {
    console.log('onClear', e);
    this.setData({
      value: '',
    });
  },
  onCancel(e) {
    console.log('onCancel', e);
  },
});

API

SearchBar props

SearchBar externalClasses