mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[breaking change] Search: rewrite
This commit is contained in:
陈嘉涵
parent
f76c438f1d
commit
8ecff7904c
@ -1,20 +1,27 @@
|
||||
Page({
|
||||
data: {
|
||||
inputValue: '',
|
||||
focus: true
|
||||
value: ''
|
||||
},
|
||||
|
||||
searchChange(e) {
|
||||
onChange(e) {
|
||||
this.setData({
|
||||
inputValue: e.detail.value
|
||||
value: e.detail
|
||||
});
|
||||
},
|
||||
|
||||
searchDone(e) {
|
||||
console.error('search', e.detail.value)
|
||||
onSearch(event) {
|
||||
if (event.detail) {
|
||||
wx.showToast({
|
||||
title: '搜索：' + event.detail,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
console.error('cancel')
|
||||
onCancel() {
|
||||
wx.showToast({
|
||||
title: '取消',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Search 搜索",
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index",
|
||||
"van-search": "../../dist/search/index",
|
||||
"van-panel": "../../dist/panel/index"
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-search": "../../dist/search/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,48 +1,31 @@
|
||||
<van-panel title='基本用法'>
|
||||
<demo-block title="基本用法">
|
||||
<van-search
|
||||
alignLeft="{{ true }}"
|
||||
placeholder="搜索..."
|
||||
keyword="{{ inputValue }}"
|
||||
placeholder="搜索商品"
|
||||
focus="{{ focus }}"
|
||||
bindchange="searchChange"
|
||||
bindsearch="searchDone"
|
||||
value="{{ value }}"
|
||||
placeholder="请输入搜索关键词"
|
||||
bind:change="onChange"
|
||||
bind:search="onSearch"
|
||||
/>
|
||||
</van-panel>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title='不可用'>
|
||||
<demo-block title="监听对应事件">
|
||||
<van-search
|
||||
alignLeft="{{ true }}"
|
||||
placeholder="搜索..."
|
||||
disabled="{{ true }}"
|
||||
placeholder="搜索商品"
|
||||
value="{{ value }}"
|
||||
show-action
|
||||
placeholder="请输入搜索关键词"
|
||||
bind:change="onChange"
|
||||
bind:search="onSearch"
|
||||
bind:cancel="onCancel"
|
||||
/>
|
||||
</van-panel>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title='自定义样式'>
|
||||
<demo-block title="自定义行动按钮">
|
||||
<van-search
|
||||
alignLeft="{{ true }}"
|
||||
placeholder="搜索..."
|
||||
searchStyle="height: 88rpx; padding: 0 30rpx; background: {{ searchbg || '#F2F2F2' }};"
|
||||
inputStyle="height: 56rpx; border-radius: 8rpx;"
|
||||
keyword="{{ inputValue }}"
|
||||
placeholder="搜索商品"
|
||||
focus="{{ focus }}"
|
||||
bindchange="searchChange"
|
||||
bindsearch="searchDone"
|
||||
/>
|
||||
</van-panel>
|
||||
|
||||
<van-panel title='取消按钮'>
|
||||
<van-search
|
||||
alignLeft="{{ true }}"
|
||||
placeholder="搜索..."
|
||||
keyword="{{ inputValue }}"
|
||||
placeholder="搜索商品"
|
||||
focus="{{ focus }}"
|
||||
useCancel="{{ true }}"
|
||||
bindchange="searchChange"
|
||||
bindsearch="searchDone"
|
||||
bindcancel="handleCancel"
|
||||
/>
|
||||
</van-panel>
|
||||
value="{{ value }}"
|
||||
placeholder="请输入搜索关键词"
|
||||
use-action-slot
|
||||
bind:change="onChange"
|
||||
bind:search="onSearch"
|
||||
>
|
||||
<view slot="action" bind:tap="onSearch">搜索</view>
|
||||
</van-search>
|
||||
</demo-block>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant-weapp",
|
||||
"version": "3.0.10",
|
||||
"version": "0.0.1-beta",
|
||||
"description": "高颜值、好用、易扩展的小程序 UI 库，Powered by 有赞",
|
||||
"main": "app.js",
|
||||
"directories": {
|
||||
|
||||
@ -3,63 +3,73 @@
|
||||
### 使用指南
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-search": "/packages/search/index"
|
||||
}
|
||||
"usingComponents": {
|
||||
"van-search": "/packages/search/index"
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
#### 基础用法
|
||||
value 用于控制搜索框中的文字
|
||||
|
||||
```wxml
|
||||
```html
|
||||
<van-search value="{{ value }}" placeholder="请输入搜索关键词" />
|
||||
```
|
||||
|
||||
#### 监听对应事件
|
||||
Search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
|
||||
|
||||
```html
|
||||
<van-search
|
||||
placeholder="搜索..."
|
||||
keyword="{{ inputValue }}"
|
||||
placeholder="搜索商品"
|
||||
focus="{{ focus }}"
|
||||
bindchange="searchChange"
|
||||
bindsearch="searchDone"
|
||||
v-model="value"
|
||||
placeholder="请输入搜索关键词"
|
||||
show-action
|
||||
@search="onSearch"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
data: {
|
||||
inputValue: '',
|
||||
focus: true
|
||||
},
|
||||
searchChange(e) {
|
||||
this.setData({
|
||||
inputValue: e.detail.value
|
||||
});
|
||||
},
|
||||
#### 自定义行动按钮
|
||||
|
||||
searchDone(e) {
|
||||
console.log('search', e.detail.value)
|
||||
}
|
||||
Search 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
v-model="value"
|
||||
placeholder="请输入搜索关键词"
|
||||
use-action-slot
|
||||
@search="onSearch"
|
||||
>
|
||||
<view slot="action" @click="onSearch">搜索</view>
|
||||
</van-search>
|
||||
```
|
||||
|
||||
### API
|
||||
Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`placeholder`、`readony`、`autofocus` 等
|
||||
|
||||
#### 参数
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
| ---------------- | ----------- | -------- | ----- | --------------------------------------------------- |
|
||||
| keyword | String | 否 | 无 | 默认搜索关键字 |
|
||||
| disabled | Boolean | 否 | false | 是否禁用 |
|
||||
| focus | Boolean | 否 | false | 是否获取焦点 |
|
||||
| useCancel | Boolean | 否 | false | 是否显示取消按钮 |
|
||||
| cancelText | String | 否 | 取消 | 取消按钮文字 | |
|
||||
| placeholder | String | 否 | 无 | 输入框占位字符串 |
|
||||
| cancelStyle | String | 否 | 无 | “取消”的样式 |
|
||||
| inputStyle | String | 否 | 无 | “输入框”的样式
|
||||
| searchStyle | String | 否 | 无 | “整个搜索”的样式
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| value | 当前输入的值 | `String | Number` | - |
|
||||
| background | 搜索框背景色 | `String` | `#f2f2f2` |
|
||||
| show-action | 是否在搜索框右侧显示取消按钮 | `Boolean` | `false` |
|
||||
| use-action-slot | 是否使用 action slot | `Boolean` | `false` |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` |
|
||||
| readonly | 是否只读 | `Boolean` | `false` |
|
||||
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | `Number` | `-1` |
|
||||
| focus | 获取焦点 | `Boolean` | `false` |
|
||||
|
||||
#### 事件
|
||||
### Event
|
||||
Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述
|
||||
| ---------------- | ----------- | -------- | ----- | ------|
|
||||
| bindcancel | EventHandle | 否 | 无 | 取消按钮点击时触发
|
||||
| bindsearch | EventHandle | 否 | 无 | 键盘点击确认时触发
|
||||
| bindchange | EventHandle | 否 | 无 | 内容改变时触发
|
||||
| bindblur | EventHandle | 否 | 无 | 焦点丢失时触发
|
||||
| bindfocus | EventHandle | 否 | 无 | 焦点聚焦时触发
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| search | 确定搜索时触发 | event.detail: 当前输入值 |
|
||||
| change | 输入内容变化时触发 | event.detail: 当前输入值 |
|
||||
| cancel | 取消搜索搜索时触发 | - |
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
| blur | 输入框失焦时触发 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
|
||||
|
||||
@ -1,67 +1,57 @@
|
||||
Component({
|
||||
externalClasses: ['search-class', 'input-class', 'cancel-class'],
|
||||
externalClasses: ['custom-class', 'cancel-class'],
|
||||
|
||||
options: {
|
||||
multipleSlots: true
|
||||
},
|
||||
|
||||
properties: {
|
||||
cancelText: {
|
||||
disabled: Boolean,
|
||||
readonly: Boolean,
|
||||
showAction: Boolean,
|
||||
useActionSlot: Boolean,
|
||||
placeholder: String,
|
||||
value: {
|
||||
type: String,
|
||||
value: '取消'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
keyword: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
show: {
|
||||
type: Array,
|
||||
value: ['icon', 'cancel']
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
value: '请输入查询关键字',
|
||||
observer(newVal) {
|
||||
this.setData({
|
||||
inputWidth: `${(newVal.length * 14) + 45}px`
|
||||
});
|
||||
observer(currentValue) {
|
||||
this.setData({ currentValue });
|
||||
}
|
||||
},
|
||||
useCancel: {
|
||||
type: Boolean
|
||||
background: {
|
||||
type: String,
|
||||
value: '#f2f2f2'
|
||||
},
|
||||
searchStyle: String,
|
||||
cancelStyle: String,
|
||||
inputStyle: String,
|
||||
maxlength: {
|
||||
type: Number,
|
||||
value: -1
|
||||
}
|
||||
},
|
||||
data: {
|
||||
inputWidth: 'auto'
|
||||
|
||||
attached() {
|
||||
this.setData({ currentValue: this.data.value });
|
||||
},
|
||||
|
||||
methods: {
|
||||
blur() {
|
||||
this.triggerEvent('blur');
|
||||
onChange(event) {
|
||||
this.triggerEvent('change', event.detail);
|
||||
},
|
||||
clearInput() {
|
||||
this.setData({
|
||||
focus: true
|
||||
});
|
||||
this.triggerEvent('change', { value: '' });
|
||||
},
|
||||
cancelSearch() {
|
||||
|
||||
onCancel() {
|
||||
this.setData({ currentValue: '' });
|
||||
this.triggerEvent('cancel');
|
||||
this.triggerEvent('change', '');
|
||||
},
|
||||
focus() {
|
||||
|
||||
onSearch() {
|
||||
this.triggerEvent('search', this.data.currentValue);
|
||||
},
|
||||
|
||||
onFocus() {
|
||||
this.triggerEvent('focus');
|
||||
},
|
||||
inputChange(e) {
|
||||
this._inputvalue = e.detail.value;
|
||||
this.triggerEvent('change', { value: e.detail.value });
|
||||
},
|
||||
search(e) {
|
||||
this.triggerEvent('search', { value: e.detail.value });
|
||||
|
||||
onBlur() {
|
||||
this.triggerEvent('blur');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index",
|
||||
"van-field": "../field/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,89 +1,41 @@
|
||||
@import '../common/index.pcss';
|
||||
|
||||
.van-search {
|
||||
display: flex;
|
||||
padding: 7px 15px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
padding:5px 10px;
|
||||
}
|
||||
|
||||
.van-search.center-placeholder {
|
||||
background: #ffffff;
|
||||
}
|
||||
&__field {
|
||||
flex: 1;
|
||||
border-radius: 4px;
|
||||
|
||||
.van-search.center-placeholder .van-search__form {
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: none;
|
||||
}
|
||||
&__left-icon {
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.van-search.van-cell::after {
|
||||
display: none;
|
||||
}
|
||||
&--show-action {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.van-search__form {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
background:#ffffff;
|
||||
border-radius: 4rpx;
|
||||
height: 64rpx;
|
||||
line-height: 56rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
input {
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.van-search picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
&__action {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
color: $gray-darker;
|
||||
|
||||
.van-search__form .picker {
|
||||
position: relative;
|
||||
width: 110rpx;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.van-search__form .picker::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -6rpx;
|
||||
border-top: 12rpx solid #333;
|
||||
border-right: 8rpx solid transparent;
|
||||
border-left: 8rpx solid transparent;
|
||||
}
|
||||
.van-search__form input {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
.van-search__form icon {
|
||||
margin-left: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.van-search__clear {
|
||||
padding: 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.van-search__placeholder {
|
||||
font-size: 28rpx;
|
||||
color: #cacaca;
|
||||
}
|
||||
.van-search__cancel {
|
||||
align-self: stretch;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #3388FF;
|
||||
&:active {
|
||||
background-color: $active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +1,28 @@
|
||||
<view
|
||||
class="van-search {{ searchClass }}"
|
||||
style="{{ searchStyle }}"
|
||||
class="van-search custom-class {{ showAction || useActionSlot ? 'van-search--show-action' : '' }}"
|
||||
style="background: {{ background }}"
|
||||
>
|
||||
<view
|
||||
class="van-search__form {{ useCancel ? 'van-search__form--cancel' : '' }} input-class"
|
||||
style="{{ inputStyle }}"
|
||||
>
|
||||
<icon type="search" size="15" color="#a9a9a9" />
|
||||
<input
|
||||
class="van-search__input"
|
||||
placeholder="{{ placeholder }}"
|
||||
placeholder-class="van-search__placeholder"
|
||||
<view class="van-search__field">
|
||||
<van-field
|
||||
clearable
|
||||
type="search"
|
||||
left-icon="search"
|
||||
border="{{ false }}"
|
||||
confirm-type="search"
|
||||
bindfocus="focus"
|
||||
bindblur="blur"
|
||||
value="{{ keyword }}"
|
||||
bindconfirm="search"
|
||||
bindinput="inputChange"
|
||||
focus="{{ focus }}"
|
||||
value="{{ currentValue }}"
|
||||
disabled="{{ disabled }}"
|
||||
/>
|
||||
<icon
|
||||
wx:if="{{keyword}}"
|
||||
class="van-search__clear"
|
||||
type="clear"
|
||||
size="14"
|
||||
color="#bbb"
|
||||
bindtap="clearInput"
|
||||
readonly="{{ readony }}"
|
||||
maxlength="{{ maxlength }}"
|
||||
placeholder="{{ placeholder }}"
|
||||
custom-style="padding: 3px 10px"
|
||||
bind:blur="onBlur"
|
||||
bind:focus="onFocus"
|
||||
bind:change="onChange"
|
||||
bind:confirm="onSearch"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="van-search__cancel cancel-class"
|
||||
wx:if="{{ useCancel }}"
|
||||
bindtap="cancelSearch"
|
||||
style="{{ cancelStyle }}"
|
||||
>
|
||||
{{cancelText || '取消'}}
|
||||
<view wx:if="{{ showAction || useActionSlot }}" class="van-search__action">
|
||||
<slot wx:if="{{ useActionSlot }}" name="action" />
|
||||
<view wx:else bind:tap="onCancel" class="cancel-class">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user