```html
<div class="demo-block" id="search-demo1">
  <lx-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"
    />
  </lx-search>
  <lx-search
    v-model="value"
    :max="11"
    @on-click-clear-icon="onClickClear"
    @on-change="onChange"
    @on-focus="onFocus"
    @on-blur="onBlur"
    @on-submit="onSubmit"
  />
</div>

<script>
// Search.md
new Vue({
  el: '#search-demo1',
  
  data: {
    value: '',
    cancelText: '取消',
    placeholder: '请输入搜索内容'
  },
  methods: {
    onChange(val) {
      console.log(val)
    },
    onFocus() {
      console.log('获取焦点')
    },
    onBlur() {
      console.log('失去焦点')
    },
    onSubmit(value) {
      console.log('我要搜索', value)
    },
    onClickClear() {
      console.log('清除搜索内容')
    }
  }
})
</script>
```