vue一步一步带你封装一个按钮组件

# 前言
本文主要对子组件的封装做一个了解
首先我们直接看一下代码显示首先是今天有一个学妹
过来问我如何封装子组件

# 实现效果

首先这个组件是基于eleemnt-ui进行封装的
我们看一眼实现效果

有了实现效果之后
我们一起来看看他的父子组件

有了实现效果之后
我们一起来看看他的父子组件

父组件

   <geyaoInputSearchclass="r"placeholder="按服务器名称搜索"ref="searchInput"@search="searchData"></geyaoInputSearch>

子组件

<template><!-- --><div class="geyao-input-search"><!--  封装带有文本框的按钮模式  --><!--   placeholder 按钮的提示文字 --><!--  inputText文本框绑定的值  --><!--  获取焦点进行一个置空操作  --><!--    --><el-input:class="['input-content', inputText != '' ? 'input-hover' : '']":placeholder="inputPlaceHolder"v-model="inputText"@focus="clearPlaceHolder()"@blur="setPlaceHolder()"@input="changeContent()"@keyup.enter.native="searchEnterFun">
<span slot="suffix" @click="clearText"><i class="eicon e-error icon-search"></i></span></el-input><el-buttonclass="search-content":class="searchBtn ? 'btnOn' : 'btnOff'"icon="eicon e-search"@click="searchData"></el-button></div>
</template>

<script>
export default {data() {return {inputText: '',searchBtn: false, //判断搜索框是否有输入的状态
/*按钮框的提示文字*/inputPlaceHolder: ''}},props: {placeholder: {type: String,default: '请输入内容'}},watch: {inputText: function(newValue, oldValue) {this.changeContent()}},created() {this.inputPlaceHolder = this.placeholder},methods: {clearText() {this.inputText = ''this.searchData()},/*获取焦点就将placehoder置空*/clearPlaceHolder() {this.inputPlaceHolder = ''},setPlaceHolder() {this.inputPlaceHolder = this.placeholder},//监听搜索框的输入状态来改变搜索按钮changeContent() {if (this.inputText != '') {this.searchBtn = true} else {this.searchBtn = false}},searchData() {this.$emit('search', this.inputText)
},searchEnterFun(e) {var keyCode = window.event ? e.keyCode : e.whichif (keyCode == 13) {this.searchData()}}}
}
</script>

<style lang="scss">
.geyao-input-search {.input-content {/*宽度200px*/width: 200px;/*设置radio样式*/.el-input__inner {border-radius: 2px 0 0 2px;padding: 0 10px;}
.icon-search {display: none;}}.input-hover {&:hover {.icon-search {font-size: 15px;color: #cccccc;display: inline-block;}}.el-input__inner:focus + .el-input__suffix {.icon-search {display: inline-block;}}}.search-content {font-size: 14px;width: 36px;height: 32px;border-left: 0;padding: 0;border-radius: 0 2px 2px 0;background: #f5f5f5;color: #999999;border-color: #d9d9d9;box-sizing: border-box;-webkit-box-sizing: border-box;vertical-align: top;}.btnOn {background: #337dff;color: #ffffff;border-color: #337dff;}.btnOff {background: #f5f5f5;color: #999999;border-color: #d9d9d9;}.el-input__suffix {top: 8px;right: 9px;cursor: pointer;}.icon-search {font-size: 15px;color: #cccccc;}
}
</style>

# 解释
首先父子组件怎么引入就不多说了
直接说主要知识点从上向下理解
# 第一行
class修改绑定一个类一个三元运算符