Vue 组件封装之 Search 搜索

一、Search 组件

组件说明：
实现搜索功能。

效果展示：
input 输入框背景铺满的效果

input 输入框未铺满的效果

二、使用案例

<template>
<el-search placeholder="请输入省市区关键字"  @on-click="queryByKey" ref="search">
</template>
<script>
 export default{
    data(){
      return{},
    }
    methods:{
      queryByKey(val){
     }
    }
}
</script>

三、API 使用指南

属性	说明	类型	默认值
placeholder	输入框的提示文字	string	“”
className	输入框背景样式，值为 default 时是默认的背景色，不传该参数则默认没有背景色的效果	string	“”
on-click	点击键盘搜索时触发	点击按钮的回调函数	(e: Object): void

四、源代码

Search.vue

<template>
  <div>
<div :class="className=='default'?'search-warp search-default-bg':className+' search-warp'" v-if="className">
  <div class="search-content">
    <img src="../images/search.png" alt="" class="search-icon">
    <form action="javascript:return true;" class="search-width-fill">
    <input type="search"
           :placeholder="placeholder"
           @keyup.13="searchByKey($event)"
           class="search-input"
           ref="input"
           @input="change($event)"
    >
    </form>
    <img src="../images/clear.png" alt="" class="search-clear" @click="clear" v-if="isShow">
  </div>
</div>
  <div class="search-warp" v-if="!className">
    <div class="search-content">
      <img src="../images/search.png" alt="" class="search-icon">
      <form action="javascript:return true;" class="search-width-fill">
      <input type="search"
             :placeholder="placeholder"
             @keyup.13="searchByKey($event)"
             class="search-input-gray"
             ref="input"
             @input="change($event)">

      </form>
      <img src="../images/clear.png" alt="" class="search-clear" @click="clear" v-if="isShow">
    </div>
  </div>
  </div>
</template>
<script>
  export default {
    name: "ElSearch",
    data(){
      return {
         isShow:false
      }
    },
    props:{
      placeholder: {
        type: String,
        default: ""
      },
      className:{
        type:String,
        default: ""
      },
    },
    methods:{
      change(e){
          if(e.target.value){
            this.isShow = true;
          }else {
            this.isShow = false;
          }
      },
      searchByKey(e){
        this.$refs.input.blur();
        this.$emit('on-click',this.$refs.input.value);//将点击搜索的事件暴露给父组件
      },
      clear(){
        this.$refs.input.value = "";
        this.isShow = false;
      }
    }

  }
</script>
<style scoped>
  input[type="search"]{
    -webkit-appearance:none;
  }
  input::-webkit-search-cancel-button {display: none;}
  .search-warp{
    padding: 0 10px;
  }
  .search-default-bg{
    background: #005398;
  }
  .search-input{
    background: #fff;
    width: 100%;
    height: 35px;
    padding: 10px 10px 10px 35px;
    border-radius: 10px;
    margin:10px 0;
    font-size: 14px;
  }
  .search-input-gray{
    background: #eee;
    width: 100%;
    height: 35px;
    border-radius: 10px;
    padding: 10px 10px 10px 35px;
    margin:10px 0;
    font-size: 14px;
  }
  .search-input::-webkit-input-placeholder{
   color: #bbbbbb;
  }
  .search-content{
    position: relative;
    display: flex;
    align-items: center;
  }
  .search-icon{
    width: 15px;
    position: absolute;
    left: 10px;
  }
  .search-clear{
    width: 20px;
    position: absolute;
    right: 10px;
  }
  .search-width-fill{
    width: 100%;
  }
</style>