187 lines
6.2 KiB
Markdown
187 lines
6.2 KiB
Markdown
|
# Search 搜索框
|
|||
|
|
|
|||
|
|
搜索框组件，支持输入框聚焦、失焦、输入、搜索、取消、清空事件。
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
`v-model`设置输入框绑定值、`focus`绑定聚焦事件、`change` 绑定输入事件，`blur`绑定失焦事件，`search` 绑定搜索事件，`cancel` 绑定取消事件，`clear` 绑定清空事件。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-search v-model="value" @focus="focus" @blur="blur" @search="search" @clear="clear" @cancel="cancel" @change="change" maxlength="10" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const value = ref<string>('')
|
|||
|
|
|
|||
|
|
function focus() {
|
|||
|
|
console.log('聚焦')
|
|||
|
|
}
|
|||
|
|
function blur() {
|
|||
|
|
console.log('失焦')
|
|||
|
|
}
|
|||
|
|
function search() {
|
|||
|
|
console.log('搜索')
|
|||
|
|
}
|
|||
|
|
function clear() {
|
|||
|
|
console.log('重置')
|
|||
|
|
}
|
|||
|
|
function cancel() {
|
|||
|
|
console.log('取消')
|
|||
|
|
}
|
|||
|
|
function change({ value }) {
|
|||
|
|
console.log('输入', value)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 浅色主题
|
|||
|
|
|
|||
|
|
设置 `light` 属性，将组件背景色和输入框背景色反转。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-search light />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 输入框提示文案靠左
|
|||
|
|
|
|||
|
|
设置 `placeholder-left` 属性。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-search placeholder-left />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 隐藏取消按钮
|
|||
|
|
|
|||
|
|
设置 `hide-cancel` 属性。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-search hide-cancel />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 禁用
|
|||
|
|
|
|||
|
|
设置 `disabled` 属性。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-search disabled />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
可以和 `hide-cancel` 结合使用，用于在本页只展示搜索框，当点击搜索框时，将页面路由切换进搜索页，在搜索页中再使用搜索功能。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-search hide-cancel disabled />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 自定义左侧插槽
|
|||
|
|
|
|||
|
|
通过使用 `prefix` 插槽自定义搜索框左侧内容。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-search v-model="value">
|
|||
|
|
<template #prefix>
|
|||
|
|
<wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
|
|||
|
|
<view class="search-type">
|
|||
|
|
<text>{{ searchType }}</text>
|
|||
|
|
<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
|
|||
|
|
</view>
|
|||
|
|
</wd-popover>
|
|||
|
|
</template>
|
|||
|
|
</wd-search>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const searchType = ref<string>('全部')
|
|||
|
|
const value = ref<string>('')
|
|||
|
|
const menu = ref([
|
|||
|
|
{
|
|||
|
|
content: '全部'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
content: '订单号'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
content: '退款单号'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
function changeSearchType({ item, index }) {
|
|||
|
|
searchType.value = item.content
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```scss
|
|||
|
|
.search-type {
|
|||
|
|
position: relative;
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
padding: 0 8px 0 16px;
|
|||
|
|
}
|
|||
|
|
.search-type::after {
|
|||
|
|
position: absolute;
|
|||
|
|
content: '';
|
|||
|
|
width: 1px;
|
|||
|
|
right: 0;
|
|||
|
|
top: 5px;
|
|||
|
|
bottom: 5px;
|
|||
|
|
background: rgba(0, 0, 0, 0.25);
|
|||
|
|
}
|
|||
|
|
.search-type {
|
|||
|
|
:deep(.icon-arrow) {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 20px;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 自定义文案
|
|||
|
|
|
|||
|
|
通过设置 `placeholder` 修改输入框提示文案，`cancel-txt` 修改取消按钮文案。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-search placeholder="请输入订单号/订单名称" cancel-txt="搜索" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Attributes
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
|||
|
|
| ------------------- | ----------------------------------------------------------------------------------------- | --------------- | ------ | ------ | -------- |
|
|||
|
|
| placeholder | 搜索框占位文本 | string | - | 搜索 | - |
|
|||
|
|
| placeholder-left | placeholder 居左边 | boolean | - | false | - |
|
|||
|
|
| cancel-txt | 搜索框右侧文本 | string | - | 取消 | - |
|
|||
|
|
| light | 搜索框亮色（白色） | boolean | - | false | - |
|
|||
|
|
| hide-cancel | 是否隐藏右侧文本 | boolean | - | false | - |
|
|||
|
|
| disabled | 是否禁用搜索框 | boolean | - | false | - |
|
|||
|
|
| maxlength | 原生属性，设置最大长度。-1 表示无限制 | string / number | - | -1 | - |
|
|||
|
|
| v-model | 输入框内容，双向绑定 | string | - | - | - |
|
|||
|
|
| ~~use-suffix-slot~~ | ~~是否使用输入框右侧插槽~~**（已废弃，将在下一个 minor 版本被移除，直接使用插槽即可）** | boolean | - | false | - |
|
|||
|
|
| focus | 是否自动聚焦 | boolean | - | false | 0.1.63 |
|
|||
|
|
| focusWhenClear | 是否在点击清除按钮时聚焦输入框 | boolean | - | false | 0.1.63 |
|
|||
|
|
| placeholderStyle | 原生属性，指定 placeholder 的样式，目前仅支持color,font-size和font-weight | string | - | - | 1.6.0 |
|
|||
|
|
| placeholderClass | 原生属性，指定 placeholder 的样式类 | string | - | - | 1.6.0 |
|
|||
|
|
|
|||
|
|
## Events
|
|||
|
|
|
|||
|
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
|||
|
|
| -------- | -------------------------- | ----------- | -------- |
|
|||
|
|
| focus | 输入框聚焦事件 | `{ value }` | - |
|
|||
|
|
| blur | 监听输入框失焦事件 | `{ value }` | - |
|
|||
|
|
| search | 监听输入框搜索事件 | `{ value }` | - |
|
|||
|
|
| clear | 监听输入框清空按钮事件 | - | - |
|
|||
|
|
| cancel | 监听输入框右侧文本点击事件 | `{ value }` | - |
|
|||
|
|
| change | 监听输入框内容变化事件 | `{ value }` | - |
|
|||
|
|
|
|||
|
|
## Slots
|
|||
|
|
|
|||
|
|
| name | 说明 | 最低版本 |
|
|||
|
|
| ------ | -------------------- | -------- |
|
|||
|
|
| prefix | 输入框左侧自定义内容 | - |
|
|||
|
|
| suffix | 输入框右侧自定义内容 | - |
|
|||
|
|
|
|||
|
|
## 外部样式类
|
|||
|
|
|
|||
|
|
| 类名 | 说明 | 最低版本 |
|
|||
|
|
| ------------ | ---------- | -------- |
|
|||
|
|
| custom-class | 根节点样式 | - |
|
|||
|
|
| custom-input-class | input 外部自定义样式 | 1.6.0 |
|