<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>
