mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Search): update document (#4414)
This commit is contained in:
neverland
GitHub
parent
f6f696ff73
commit
4192ef198e
@ -17,7 +17,7 @@ Vue.use(Field);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过 v-model 绑定输入框的值
|
||||
通过`v-model`绑定输入框的值
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
|
||||
@ -82,19 +82,20 @@ Search support all native properties of input tag，such as `maxlength`、`place
|
||||
|
||||
### Events
|
||||
|
||||
Search support all native events of input tag，such as `focus`、`blur`、`keypress`
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| search | Triggered when confirm search | value: current value |
|
||||
| input | Triggered when input value changed | value: current value |
|
||||
| focus | Triggered when input gets focus | event: Event |
|
||||
| blur | Triggered when input loses focus | event: Event |
|
||||
| clear | Triggered when click clear icon | event: Event |
|
||||
| cancel | Triggered when click cancel button | - |
|
||||
| search | Triggered when confirm search | - |
|
||||
| clear | Triggered when click clear icon | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| label | Custom Search label |
|
||||
| action | Custom right button, displayed when `showAction` is true |
|
||||
| action | Custom right button, displayed when `show-action` is `true` |
|
||||
| left-icon | Custom left icon |
|
||||
| right-icon | Custom right icon |
|
||||
|
||||
@ -19,7 +19,7 @@ Vue.use(Search);
|
||||
<van-search placeholder="请输入搜索关键词" v-model="value" />
|
||||
```
|
||||
|
||||
### 监听对应事件
|
||||
### 事件监听
|
||||
|
||||
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
|
||||
|
||||
@ -37,7 +37,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
|
||||
</form>
|
||||
```
|
||||
|
||||
### 自定义行动按钮
|
||||
### 自定义按钮
|
||||
|
||||
`van-search` 支持自定义右侧取消按钮，使用名字为 action 的插槽即可。使用此插槽以后，原有的 cancel 事件不再生效。
|
||||
|
||||
@ -75,19 +75,20 @@ Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pl
|
||||
|
||||
### Events
|
||||
|
||||
Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| cancel | 取消搜索 | - |
|
||||
| search | 确定搜索 | - |
|
||||
| clear | 点击清除按钮后触发 | - |
|
||||
| search | 确定搜索时触发 | value: 输入框当前值 |
|
||||
| input | 输入框内容变化时触发 | value: 输入框当前值 |
|
||||
| focus | 输入框获得焦点时触发 | event: Event |
|
||||
| blur | 输入框失去焦点时触发 | event: Event |
|
||||
| clear | 点击清除按钮后触发 | event: Event |
|
||||
| cancel | 点击取消按钮时触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| label | 自定义搜索框左侧文本 |
|
||||
| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
|
||||
| action | 自定义搜索框右侧按钮，设置`show-action`属性后展示 |
|
||||
| left-icon | 自定义输入框左侧图标 |
|
||||
| right-icon | 自定义输入框右侧图标 |
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-search
|
||||
v-model="value"
|
||||
:placeholder="$t('placeholder')"
|
||||
/>
|
||||
<van-search v-model="value" :placeholder="$t('placeholder')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<demo-block :title="$t('listenToEvents')">
|
||||
<form action="/">
|
||||
<van-search
|
||||
v-model="value"
|
||||
@ -19,7 +16,7 @@
|
||||
</form>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<demo-block :title="$t('customButton')">
|
||||
<van-search
|
||||
v-model="value"
|
||||
:placeholder="$t('placeholder')"
|
||||
@ -40,16 +37,16 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '监听对应事件',
|
||||
title3: '高级用法',
|
||||
label: '地址',
|
||||
placeholder: '请输入搜索关键词',
|
||||
label: '地址'
|
||||
customButton: '自定义按钮',
|
||||
listenToEvents: '事件监听'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Listen to Events',
|
||||
title3: 'Advanced Usage',
|
||||
label: 'Address',
|
||||
placeholder: 'Placeholder',
|
||||
label: 'Address'
|
||||
customButton: 'Custom Button',
|
||||
listenToEvents: 'Listen to Events'
|
||||
}
|
||||
},
|
||||
|
||||
@ -63,6 +60,7 @@ export default {
|
||||
onSearch() {
|
||||
this.$toast(this.value);
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.$toast(this.$t('cancel'));
|
||||
}
|
||||
|
||||
@ -67,9 +67,6 @@ function Search(
|
||||
attrs: ctx.data.attrs,
|
||||
on: {
|
||||
...ctx.listeners,
|
||||
input(value: string) {
|
||||
emit(ctx, 'input', value);
|
||||
},
|
||||
keypress(event: KeyboardEvent) {
|
||||
// press enter
|
||||
if (event.keyCode === 13) {
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`left-icon prop 1`] = `
|
||||
exports[`label slot 1`] = `
|
||||
<div class="van-search" style="background: rgb(255, 255, 255);">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-search__label">Custom Label</div>
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-setting-o">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-field__body"><input type="search" class="van-field__control"></div>
|
||||
@ -14,12 +15,11 @@ exports[`left-icon prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render label slot 1`] = `
|
||||
exports[`left-icon prop 1`] = `
|
||||
<div class="van-search" style="background: rgb(255, 255, 255);">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-search__label">Custom Label</div>
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-field__body"><input type="search" class="van-field__control"></div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import Search from '..';
|
||||
import { mount } from '../../../test/utils';
|
||||
|
||||
test('listen input event', () => {
|
||||
test('input event', () => {
|
||||
const onInput = jest.fn();
|
||||
const wrapper = mount(Search, {
|
||||
context: {
|
||||
@ -18,7 +18,7 @@ test('listen input event', () => {
|
||||
expect(onInput).toHaveBeenCalledWith('1');
|
||||
});
|
||||
|
||||
test('cancel search', () => {
|
||||
test('cancel event', () => {
|
||||
const onInput = jest.fn();
|
||||
const onCancel = jest.fn();
|
||||
|
||||
@ -42,7 +42,7 @@ test('cancel search', () => {
|
||||
expect(onCancel).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('emit a search event', () => {
|
||||
test('search event', () => {
|
||||
const onSearch = jest.fn();
|
||||
const onKeypress = jest.fn();
|
||||
|
||||
@ -63,7 +63,7 @@ test('emit a search event', () => {
|
||||
expect(onKeypress).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('render label slot', () => {
|
||||
test('label slot', () => {
|
||||
const wrapper = mount(Search, {
|
||||
scopedSlots: {
|
||||
label() {
|
||||
|
||||
@ -13,7 +13,7 @@ Vue.use(Tag);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过 type 属性控制 Tag 颜色，默认为灰色
|
||||
通过`type`属性控制标签颜色，默认为灰色
|
||||
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
|
||||
@ -11,8 +11,8 @@ export type TagType = 'default' | 'primary' | 'success' | 'danger';
|
||||
export type TagSize = 'large' | 'medium';
|
||||
|
||||
export type TagProps = {
|
||||
type: TagType;
|
||||
size?: TagSize;
|
||||
type?: TagType;
|
||||
mark?: boolean;
|
||||
color?: string;
|
||||
plain?: boolean;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user