修改el-input样式
<template>
<div id="search_container">
<el-input class="search" :id="inputObj.inputId" type="text" v-model="inputObj.userInput"
placeholder="请输入你要查找的关键字"></el-input>
<button id="searchBtn" @click="send">search</button>
</div>
</template>
<script>
import eventBus from '@/eventBus/eventBus';
export default {
data() {
return {
inputObj: {
userInput: '',
inputId: 'searchInput'
}
}
},
methods: {
send() {
eventBus.$emit('shareUserInput', this.inputObj)
console.log(this.inputObj)
}
},
mounted() {
this.send()
}
}
</script>
<style lang="less" scoped>
#search_container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
.el-input__inner {
height: 30px;
width: 300px;
box-shadow: 0 2px 10px 2px #999999;
border-radius: 30px;
padding: 0 8px;
border: solid 2px rgba(41, 36, 36, 0.308);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#searchBtn {
height: 30px;
width: 80px;
border-radius: 30px;
text-align: center;
cursor: pointer;
background-color: aliceblue;
border: solid 2px rgb(151, 163, 172);
}
}</style>
开始想当然的这么写的
发现不生效,甚至后面加上!important
也不生效。效果如图:
后来百度了下说是要加上::deep
加上类名和::deep
之后生效了, 效果如图: