[Doc] new theme

This commit is contained in:
陈嘉涵
2019-05-15 20:53:04 +08:00
parent 3cae4288f2
commit d0f4169c86
130 changed files with 1460 additions and 1147 deletions
+10 -5
View File
@@ -1,15 +1,16 @@
## Search
# Search
### Install
``` javascript
import { Search } from 'vant';
Vue.use(Search);
```
### Usage
## Usage
#### Basic Usage
### Basic Usage
```html
<van-search placeholder="Placeholder" v-model="value" />
@@ -23,7 +24,8 @@ export default {
}
```
#### Listen to Events
### Listen to Events
`search` event will be triggered when click the search button on the keyboard.
`cancel` event will be triggered when click the cancel button.
@@ -42,7 +44,8 @@ Tips: There will be a search button on the keyboard when Search is inside a form
</form>
```
#### Custom Button
### Custom Button
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
```html
@@ -56,6 +59,8 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
</van-search>
```
## API
### Props
Search support all native properties of input tagsuch as `maxlength`、`placeholder`、`autofocus`
+12 -6
View File
@@ -1,22 +1,25 @@
## Search 搜索
# Search 搜索
### 引入
### 使用指南
``` javascript
import { Search } from 'vant';
Vue.use(Search);
```
### 代码演示
## 代码演示
### 基础用法
#### 基础用法
`van-search` 中,v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
```html
<van-search placeholder="请输入搜索关键词" v-model="value" />
```
#### 监听对应事件
### 监听对应事件
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
Tips: 在 `van-search` 外层增加 form 标签,并且 action 不为空,即可在 IOS 弹出的输入法中显示搜索按钮
@@ -33,7 +36,8 @@ Tips: 在 `van-search` 外层增加 form 标签,并且 action 不为空,即
</form>
```
#### 自定义行动按钮
### 自定义行动按钮
`van-search` 支持自定义右侧取消按钮,使用名字为 action 的插槽即可。使用此插槽以后,原有的 cancel 事件不再生效。
```html
@@ -48,6 +52,8 @@ Tips: 在 `van-search` 外层增加 form 标签,并且 action 不为空,即
</van-search>
```
## API
### Props
Search 默认支持 Input 标签所有的原生属性,比如 `maxlength`、`placeholder`、`autofocus` 等