<template>
  <div class="zy-search-btn" :class="{'showBtn':isShowBtn===true}" @click="handleClick" :style="{background: background, color: color}">
    <div class="zy-search-btn" >
      <div class="icon"></div>
      <div class="placeholder" >{{name}}</div>
    </div>
    <div v-if="isShowBtn" class="searchBtn" >搜索</div>
  </div>
</template>

<script>
export default {
  name: 'ZySearchBtn',
  props: {
    name: {
      default: '请输入商品名称'
    },
    background: {
      default: '#f5f5f5'
    },
    color: {
      default: '#cccccc'
    },
    isShowBtn: {
      default:false
    }
  },
  methods: {
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss">
 @use "./search.scss";
</style>