<template>
  <section>
    <h2>无边框，有背景色类型{{ key1 }}</h2>
    <h4>修改placeholder，右边操作按钮一直在</h4>
    <div class="box">
      <lyf-search v-model="key1" placeholder="默认type" :showAction="true" @input="oninput" readonly></lyf-search>
    </div>
    <h4>改变操作按钮文案，有默认值</h4>
    <lyf-search 
      v-model="key3"
      :showAction="true"
      actionText="返回"
      @clear="clear"
      @change="change"
      @action-event="actionEvent"
    ></lyf-search>
    <h4>不显示右边操作按钮</h4>
    <lyf-search 
      v-model="key2"
      :showAction="false"
      inputmode="numeric"
    ></lyf-search>
    <h4>聚焦后一直显示右边操作按钮</h4>
    <h4>失焦后有关键词显示右边操作按钮，否则隐藏</h4>
    <div class="box">
      <lyf-search 
        v-model="key4"
        :showActionAfterFocus="true"
        @action-event="actionEvent4"
      ></lyf-search>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      key1: '',
      key2: '',
      key3: '哈哈',
      key4: '',
      showAction4: true
    }
  },
  methods: {
    change() {}, 
    clear(v) {
      console.log('v', v);
    },
    actionEvent() {
      console.log('返回');
    },
    focus4() {
      this.showAction4 = true
    },
    actionEvent4() {
      console.log(1);
      this.key4 = ''
    },
    oninput(k) {
      console.log(k);
    }
  }
}
</script>

<style scoped>
h2 {margin-top: 20px;}
h4 {margin: 20px 0 10px;}
.box {
  padding: 0 16px;
}
</style>