效果图
搜索框源码
<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属性的;目前暂时解决了问题,如果更好的方式欢迎留言!