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修改绑定一个类一个三元运算符

# 第二行
inputPlaceHolder是父亲组件的值直接父子组件传值
值为空的时候

# 第三行
获取焦点的时候把inputPlaceHolder置空

# 第四行
失去焦点的时候将inputPlaceHolder显示

# 第五行
输入的时候父子触发显示X号按钮

我是歌谣放弃很容易但是坚持一定很酷

vue一步一步带你封装一个按钮组件相关推荐

Vue3VideoPlay+vue3+ts封装一个视频播放组件
vue3+ts封装一个视频播放组件基于Vue3VideoPlay 做了常用的配置,复制即用! 官方文档https://codelife.cc/vue3-video-play/ 安装 npm安装: n ...
vue 开发一个按钮组件
最近面试,被问到一个题目,vue做一个按钮组件: 当时只是说了一下思路,回来就附上代码. 解决思路: 通过父子组件通讯($refs 和 props) props接受参数, $refs调用子组件的方法 ...
封装一个layui组件---js实现数字翻牌器效果
封装一个layui组件-js实现数字翻牌器效果 layui.define(["jquery"], function (exports) {var $ = layui.jquery; ...
vue中使用qrcode.js，封装一个生成二维码的组件(支持下载和copy二维码里面的链接)
这是一个自己封装的组件市面上还有其他组件: vue-qr :这个可以给二维码中间加图片本次封装组件的实例图如下: 下载qrcodde npm i qrcode -S 下载复制的插件 npm i v ...
vue封装一个日历组件
图示封装的组件的代码如下 <template><div class="calendar"><div c ...
用vue自己封装一个分页组件
准备知识:全局配置组件(本文不赘述,可自行百度) 先来看下效果. 非常简单的效果.事件上仅改变页码,无其他. 1.新建文件pagination.vue.简单解释下:先写DOM结构和样式,接着是事件. ...
从 0 到 1 用 Vue 封装一个日历组件
写在前面双手奉上代码链接: 传送门 - ajun568(https://github.com/ajun568/vue-calendar),点击文末阅读原文直达双脚奉上最终效果图: 需求分析需求分 ...
vue封装一个弹幕组件
说在前面
封装一个视频组件（可模拟画中画效果）
目录前言: 1.效果: 2.效果图: 3.代码实现前言: 我是用的原生js写的这个功能,因此这个组件在vue.react.jquery等框架中均可使用,例如,我就是用在基于nuxt.js框架+ty ...

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

vue一步一步带你封装一个按钮组件相关推荐

最新文章

热门文章