<template>
<div class="chatSearch">
<input type="text" v-model="input" placeholder="search...">
<i class="icon iconfont icon-search"></i>
</div>
</template>
<script>
export default {
data(){
return{
}
},
props:{
input:{
type:String
}
}
}
</script>
<style lang="less" scoped>
.chatSearch{
height: 80%;
margin-top: 1%;
margin-bottom: 1%;
width: 90%;
position: relative;
input{
width: 100%;
height: 100%;
background-color: #EDEEF6;
border: none;
outline: none;
box-sizing: border-box;
padding: 5px;
padding-left: 15px;
border-radius: 15px;
color: #C0C4CB;
}
i{
position: absolute;
right: 2%;
font-size: 25px;
color: #C0C4CB;
cursor: pointer;
}
}
input::-webkit-input-placeholder{
color:#B8BDC3;
}
</style>
search组件
最新推荐文章于 2024-07-10 13:45:25 发布