vue封装好看的搜索框组件,input自动获取焦点
我们做vue项目,一般会封装一些常用的组件,今天我就把我自己封装的搜索框分享给大家,样式简洁漂亮,点击搜索,input输入框会自动获取焦点。如下图所示html部分<template><div class="search_box"><div class="search_btn" @click="onShow" v-if="!isShow"><img @cli
·
我们做vue项目,一般会封装一些常用的组件,今天我就把我自己封装的搜索框分享给大家,样式简洁漂亮,点击搜索,input输入框会自动获取焦点。如下图所示
html部分
<template>
<div class="search_box">
<div class="search_btn" @click="onShow" v-if="!isShow">
<img @click="clickSearch" src="@/assets/images/icon_search.png" />
<span>搜索</span>
</div>
<div class="search_input" v-if="isShow">
<img @click="clickSearch" src="@/assets/images/icon_search.png" />
<input
v-if="isShow"
v-model="searchKey"
placeholder="搜索"
@blur="clickSearch"
@keyup.13="clickSearch"
ref="input"
/>
</div>
<a v-if="isShow" @click="onShow">取消</a>
</div>
</template>
js部分
<script>
import { navPage } from "../api/api";
export default {
data() {
return {
searchKey: "",
isShow: false,
};
},
methods: {
onShow() {
this.isShow = !this.isShow;
if (this.isShow) {
//input 自动获取焦点
this.$nextTick(() => {
this.$refs.input.focus()
});
}
this.searchKey = "";
this.clickSearch();
},
clickSearch() {
let param = {
moduleCode: "xmzl_zxjd",
keyword: this.searchKey.trim(),
};
navPage(param).then((res) => {
if (res.data && res.data.success) {
let searchData = res.data.responData.part3[0].items;
// 将多个参数传给父组件
this.$emit("onSearch", searchData, this.searchKey);
}
});
},
},
};
</script>
css部分
<style lang="less" scoped>
.search_box {
margin-bottom: 20px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
> a {
color: #2d6efb;
font-size: 14px;
margin-left: 12px;
}
.search_input {
flex: 1;
height: 36px;
background: #f7f7f7;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 16px;
height: 16px;
margin: 0 12px;
}
input {
flex: 1;
height: 100%;
font-size: 14px;
outline: none;
background: transparent;
color: #666;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #999999;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999999;
}
input:-ms-input-placeholder {
color: #999999;
}
input::-webkit-input-placeholder {
color: #999999;
}
}
.search_btn {
flex: 1;
height: 36px;
background: #f7f7f7;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 16px;
height: 16px;
margin: 0 12px;
}
span {
font-size: 16px;
color: #999999;
}
}
}
</style>
父组件调用
<search @onSearch="onSearch"></search>
//获取子组件传过来的值
onSearch(searchData, searchKey) {
this.searchKey = searchKey;
this.searchData = searchData;
},
更多推荐
已为社区贡献16条内容
所有评论(0)