网站 关键词库,在本地用dedecms做好的网站如何上传到服务器?,wordpress英文主题破解版,微信小程序入口登录# 前言 本文主要对子组件的封装做一个了解 首先我们直接看一下代码显示 首先是今天有一个学妹 过来问我如何封装子组件 # 实现效果 首先这个组件是基于eleemnt-ui进行封装的 我们看一眼实现效果 有了实现效果 之后 我们一起来看看他的父子组件
有了实现效果 之后 我们一起来看…# 前言 本文主要对子组件的封装做一个了解 首先我们直接看一下代码显示 首先是今天有一个学妹 过来问我如何封装子组件 # 实现效果 首先这个组件是基于eleemnt-ui进行封装的 我们看一眼实现效果 有了实现效果 之后 我们一起来看看他的父子组件
有了实现效果 之后 我们一起来看看他的父子组件 父组件 geyaoInputSearchclassrplaceholder按服务器名称搜索refsearchInputsearchsearchData/geyaoInputSearch 子组件
template!-- --div classgeyao-input-search!-- 封装带有文本框的按钮模式 --!-- placeholder 按钮的提示文字 --!-- inputText文本框绑定的值 --!-- 获取焦点进行一个置空操作 --!-- --el-input:class[input-content, inputText ! ? input-hover : ]:placeholderinputPlaceHolderv-modelinputTextfocusclearPlaceHolder()blursetPlaceHolder()inputchangeContent()keyup.enter.nativesearchEnterFun
span slotsuffix clickclearTexti classeicon e-error icon-search/i/span/el-inputel-buttonclasssearch-content:classsearchBtn ? btnOn : btnOfficoneicon e-searchclicksearchData/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 langscss
.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修改绑定一个类 一个三元运算符 # 第二行 inputPlaceHolder是父亲组件的值 直接父子组件传值 值为空的时候 # 第三行 获取焦点的时候把inputPlaceHolder置空 # 第四行 失去焦点的时候将inputPlaceHolder显示 # 第五行 输入的时候父子触发显示X号按钮 我是歌谣 放弃很容易 但是坚持一定很酷
