这是我基于element封装的第一个组件——搜索框组件
定义组件
1. 此组件可以传递placeholder
2. 定义了一个搜索框事件
项目中执行 npm i element-ui -S (安装)
在main.js中写入
/* 引入element */
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
/* 运用 ElementUI */
Vue.use(ElementUI)
开始封装
<template>
<div class="search-wrapper-box">
<el-input
v-model="sceneName"
class="search-input elc-list-input"
size="mini"
:placeholder="placeholderName"
@keyup.native.enter="searchCon"
>
<i slot="prefix" class="el-input__icon el-icon-search search-icon" @click="searchCon" />
</el-input>
<!-- <div class="a"></div> -->
</div>
</template>
<script>
export default {
name: 'SearchInput',
props: {
placeholderName: {
type: String,
default: '',
},
},
data() {
return {
sceneName: '',
}
},
methods: {
searchCon() {
this.$emit('sendSearchName', this.sceneName)
},
},
}
</script>
<style lang="scss" scoped>
.search-wrapper-box {
position: absolute;
right: 50px;
top: 50px;
width: 306px;
// 搜索框样式覆盖
.search-input {
::v-deep .el-input__inner {
height: 45px;
line-height: 45px;
border-radius: 23px;
padding-left: 40px;
font-size: 14px;
}
::v-deep .el-input__icon {
margin: 3px 0 0 5px;
font-size: 18px;
}
}
}
</style>