vue开发实现搜索
<template>
<div>
<div class="search">
<div class="searchinput wow fadeInLeft" data-wow-delay="0.3s">
<input @keyup.enter="goSearch" v-model="keyword" type="text" placeholder="IP、主机名、业务部门、软件包名称">
</div>
<div class="searchbut wow fadeInRight cur" @click="goSearch">
搜索
</div>
</div>
</div>
</template>
<script>
export default {
name: 'nav',
components: {},
props: {
id: {
type: String,
default() {
return ''
}
}
},
data() {
return {
status: '',
keyword: this.$route.query.keyword ? this.$route.query.keyword : ''
}
},
watch: {
$route(to, from) {
this.goSearch()
}
},
mounted() {
},
methods: {
goSearch() {
this.$emit('getdata', this.keyword)
}
}
}
</script>
<style lang="scss" scoped>
.search {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
width: 100%;
overflow: hidden;
.searchinput {
width: calc(100% - 220px);
height: 60px;
background: #212836;
border: 1px solid #727FA3;
border-radius: 10px;
input {
width: 100%;
height: 60px;
background: none;
border: 0;
outline: none;
text-indent: 30px;
color: #fff;
font-size: 16px;
}
}
.searchbut {
width: 180px;
height: 60px;
background: #1AC47C;
border-radius: 10px;
font-size: 20px;
font-family: Source Han Sans SC;
font-weight: 400;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
}
</style>