---
nav: default
---
### Search
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fsearch"/>
<a href="demo/#/component/search" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/search</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/search" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <Search
      v-model="value"
      @on-click-clear-icon="onClickClear"
      @on-change="onChange"
      @on-focus="onFocus"
      @on-blur="onBlur"
      @on-submit="onSubmit"
    >
      <div
        slot="label"
        class="label"
      />
    </Search>
    <Search
      v-model="value"
      :max="11"
      @on-click-clear-icon="onClickClear"
      @on-change="onChange"
      @on-focus="onFocus"
      @on-blur="onBlur"
      @on-submit="onSubmit"
    />
  </div>
</template>
<script>
import { Search } from '../components/_index'
export default {
  components: {
    Search
  },
  data() {
    return {
      value: '',
      cancelText: '取消',
      placeholder: '请输入搜索内容'
    }
  },
  methods: {
    onChange(val) {
      console.log(val)
    },
    onFocus() {
      console.log('获取焦点')
    },
    onBlur() {
      console.log('失去焦点')
    },
    onSubmit(value) {
      console.log('我要搜索', value)
    },
    onClickClear() {
      console.log('清除搜索内容')
    }
  }
}
</script>
<style lang="less">
  .label{
  }
</style>

```

#### Github Issue