From 1dfbc69aef21dcfebd33625eb94fc91c6beb4932 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Fri, 24 Jan 2020 10:28:08 +0800 Subject: [PATCH] docs(Search): update demo --- src/search/README.md | 72 +++++++++++---- src/search/README.zh-CN.md | 87 +++++++++++++------ src/search/demo/index.vue | 65 ++++++++------ .../test/__snapshots__/demo.spec.js.snap | 80 ++++++++--------- 4 files changed, 194 insertions(+), 110 deletions(-) diff --git a/src/search/README.md b/src/search/README.md index acc7e92b7..d594ea8a2 100644 --- a/src/search/README.md +++ b/src/search/README.md @@ -14,7 +14,7 @@ Vue.use(Search); ### Basic Usage ```html - + ``` ```js @@ -24,23 +24,6 @@ export default { } } ``` -### Custom Background Color - -```html - -``` - -### Disable Search Bar - -```html - -``` - -### Search Bar Content Alignment - -```html - -``` ### Listen to Events @@ -50,16 +33,67 @@ export default {
``` +```js +import { Toast } from 'vant'; + +export default { + data() { + return { + value: '' + }; + }, + methods: { + onSearch(val) { + Toast(val); + }, + onCancel() { + Toast('Cancel'); + } + } +} +``` + > Tips: There will be a search button on the keyboard when Search is inside a form in iOS. +### Input Align + +```html + +``` + +### Disabled + +```html + +``` + +### Custom Background Color + +```html + +``` + ### Custom Action Button Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index 6bd286c16..dda46d3cb 100644 --- a/src/search/README.zh-CN.md +++ b/src/search/README.zh-CN.md @@ -16,26 +16,7 @@ Vue.use(Search); v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色 ```html - -``` - -### 自定义背景色 - -```html - -``` - -### 禁用搜索框 - -```html - -``` - -### 搜索框内容对齐 -通过 `input-align` 属性可以设置搜索框内容的对齐方式 - -```html - + ``` ### 事件监听 @@ -46,26 +27,82 @@ Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘
``` +```js +import { Toast } from 'vant'; + +export default { + data() { + return { + value: '' + }; + }, + methods: { + onSearch(val) { + Toast(val); + }, + onCancel() { + Toast('取消'); + } + } +} +``` + > Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮 -### 自定义按钮 +### 搜索框内容对齐 -使用`action`插槽可以自定义右侧按钮的内容。使用插槽后，cancel 事件将不再触发 +通过 `input-align` 属性设置搜索框内容的对齐方式，可选值为`center`、`right` ```html +``` + +### 禁用搜索框 + +通过`disabled`属性禁用搜索框 + +```html + +``` + +### 自定义背景色 + +通过`background`属性可以设置搜索框外部的背景色，通过`shape`属性设置搜索框的形状，可选值为`round` + +```html + +``` + +### 自定义按钮 + +使用`action`插槽可以自定义右侧按钮的内容。使用插槽后，`cancel`事件将不再触发 + +```html +
搜索
@@ -80,7 +117,7 @@ Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘 |------|------|------|------| | label | 搜索框左侧文本 | *string* | - | | shape | 搜索框形状，可选值为 `round` | *string* | `square` | -| background | 搜索框背景色 | *string* | `#f2f2f2` | +| background | 搜索框外部背景色 | *string* | `#f2f2f2` | | maxlength | 输入的最大字符数 | *string \| number* | - | | placeholder | 占位提示文字 | *string* | - | | clearable | 是否启用清除控件 | *boolean* | `true` | diff --git a/src/search/demo/index.vue b/src/search/demo/index.vue index d034ef12d..e24eb95fc 100644 --- a/src/search/demo/index.vue +++ b/src/search/demo/index.vue @@ -1,25 +1,13 @@