自定义input[search]的清除按钮，点击清除按钮后触发指定的事件

效果图

搜索框源码

<div class="mySearch mySearch-fixed">
    <input
      class="searchInput"
      type="search"
      v-model="keywords"
      @input="handleClear($event)"
    />
    <button class="searchBtn">搜索</button>
  </div>

 

.mySearch {
  position: relative;

    input::-webkit-search-cancel-button {
      -webkit-appearance: none;
      cursor: pointer;
      position: relative;
      height: 15px;
      width: 15px;
      border-radius: 50%;
      /**使用自定义的背景图替换默认X  **/
      background: url("@/assets/image/circle-close.svg") no-repeat center;
      background-size: 100% 100%;
      color: rgba(0, 0, 0, 0);
    }
}

.mySearch-fixed {
    background         : url("@/assets/image/icon/inputIcon.svg") no-repeat 0 0;
    background-position: left 10px center;
    padding-left       : 36px;
}

点击清除按钮

handleClear(e) {
      // 1.通过观察@input的$event事件值发现，点击清除按钮的$event里没有data属性；
      // 2.判断是否有 e 是否含有data属性
      var bool = "data" in e;//含有为true，否为false
      if (!bool) {
        console.log('清除了');
      }
},

测试了好多次，发现只有点击清除按钮时，$event里是没有data属性的；目前暂时解决了问题，如果更好的方式欢迎留言！