手动封装element-ui里面的button组件

首先我们知道vue里面包含有父子组件

但是你知道如果要进行一个element的手动组件封装

怎么封装吗

1首先第一步

首先我们建立一个组件

最好设置在一个文件目录下比如components

只是一个普通的组件

叫做OneButton.vue

    <template><button class="one-button">按钮组件</button></template><script>export default {name: 'oneButton'}
</script><style lang="scss">
</style>

要想使用该组件

就需要进行全局注册

就是在main.js里面注册了

 import Vue from 'vue'import App from './App.vue'// 第一步：导入button组件import OneButton from './components/button.vue'Vue.config.productionTip = false// 第二步：注册组件,设置(组件名，组件)Vue.component(OneButton.name, OneButton)new Vue({render: h => h(App)}).$mount('#app')

注册完成以后就可以进行使用了

<template><div id="app"><one-button>按钮</one-button></div>
</template><script>
export default {name: 'App',components: {}
}
</script><style lang="scss">
</style>

到这里

我们可以看到就会显示一个普通按钮了

但是吧这样的封装过于简单

能不能实现更加复杂的操作呢

于是

我们需要封装一个有element-ui风格的组件

好那我们继续实现

我们先让文字可以自由的输入

那就要利用插槽了

 <template><button class="one-button"><span><slot></slot></span></button></template>

我们的文件需要做以上处理

 <template><div><one-button>歌谣</one-button><one-button>帅气</one-button><one-button>关注我</one-button></div></template>

加上基本样式

 <style lang="scss">.one-button{display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;background: #ffffff;border: 1px solid #dcdfe6;color: #606266;-webkit-appearance: none;text-align: center;box-sizing: border-box;outline: none;margin: 0;transition: 0.1s;font-weight: 500;//禁止元素的文字被选中-moz-user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;padding: 12px 20px;font-size: 14px;border-radius: 4px;&:hover,&:hover{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;}}</style>

这样文字的效果就实现了

到了这里你又想element里面可以控制type属性控制按钮样式

怎么可以实现呢

父元素传递type值

    <template><div id="app"><div class="row"><one-button>按钮</one-button><one-button type="primary">primary按钮</one-button><one-button type="success">success按钮</one-button><one-button type="info">info按钮</one-button><one-button type="danger">danger按钮</one-button><one-button type="warning">warning按钮</one-button></div></div></template>

子元素接收当然props了

 export default {name: 'oneButton',// 此时对props进行校验，值接收string类型的type值props: {type:{type: String，// 设置默认值：如果不传值，那么使用defaultdefault: 'default'}},created () {console.log(this.type)//defalut primary success info danger warning}}

做过处理以后根据type就可以实现数据的操作了

动态绑定样式

  <template><button class="one-button" :class="`one-button-${type}`"><span><slot></slot></span></button></template>

最后定义好样式

  .one-button-primary{color:#fff;background-color: #409eff;border-color: #409eff;&:hover,&:focus{background: #66b1ff;background-color: #66b1ff;color: #fff;}}.one-button-success{color:#fff;background-color: #67c23a;border-color: #67c23a;&:hover,&:focus{background: #85ce61;background-color: #85ce61;color: #fff;}}.one-button-info{color:#fff;background-color: #909399;border-color: #909399;&:hover,&:focus{background: #a6a9ad;background-color: #a6a9ad;color: #fff;}}.one-button-warning{color:#fff;background-color: #e6a23c;border-color: #e6a23c;&:hover,&:focus{background: #ebb563;background-color: #ebb563;color: #fff;}}.one-button-danger{color:#fff;background-color: #f56c6c;border-color: #f56c6c;&:hover,&:focus{background: #f78989;background-color: #f78989;color: #fff;}}

运行

nice呀有没有

这个时候你可能会想

如果设置plain属性怎么设置呢

和type类型相同，我们只要将样式先设置好，然后通过父组件传递过来的值进行判断，就可以设置plain属性了。

和type类型相同，我们只要将样式先设置好，然后通过父组件传递过来的值进行判断，就可以设置plain属性了。第一步:父组件组件传递plain值<template><div id="app"><div class="row"><one-button plain>按钮</one-button><one-button plain type="primary">primary按钮</one-button><one-button plain type="success">success按钮</one-button><one-button plain type="info">info按钮</one-button><one-button plain type="danger">danger按钮</one-button><one-button plain type="warning">warning按钮</one-button></div></div></template>第二步：子组件接收负组件传递的数据，同样进行props校验，并且设置默认值为falseprops: {plain: {type: Boolean,default: false}}第三步:通过绑定类名的方法动态控制样式，由于plain类型是布尔值，所以在类型中我们使用对象的形式来控制样式<template><button class="one-button" :class="[`one-button-${type}`,{'is-plain':plain}]"><span><slot></slot></span></button></template>第四步：设置不同类型的样式，由于plain类型是以对象的形式在类中定义的，所以使用获取属性的方法定义样式// 朴素按钮样式.one-button.is-plain{&:hover,&:focus{background: #fff;border-color: #489eff;color: #409eff;}}.one-button-primary.is-plain{color: #409eff;background: #ecf5ff;&:hover,&:focus{background: #409eff;border-color: #409eff;color: #fff;}}.one-button-success.is-plain{color: #67c23a;background: #c2e7b0;&:hover,&:focus{background: #67c23a;border-color: #67c23a;color: #fff;}}.one-button-info.is-plain{color: #909399;background: #d3d4d6;&:hover,&:focus{background: #909399;border-color: #909399;color: #fff;}}.one-button-warning.is-plain{color: #e6a23c;background: #f5dab1;&:hover,&:focus{background: #e6a23c;border-color: #e6a23c;color: #fff;}}.one-button-danger.is-plain{color: #f56c6c;background: #fbc4c4;&:hover,&:focus{background: #f56c6c;border-color: #f56c6c;color: #fff;}}

nice呀有没有

round属性也是一样

button组件的round属性设置round属性和之前的相似，只要在组件中定义好了样式，动态获取属性值即可。获取属性值：round: {type: Boolean,default: false}round样式：.one-button.is-round{border-radius: 20px;padding: 12px 23px;}

看看效果

nice有没有

到这里

我们看看字体图标怎么实现

字体图标也是要引入的

第一步：在main.js中引入字体图标import './assets/fonts/iconfont.css'第二步：将下载的字体图标css文件中的类名做修改，我将icon全部改为了one-icon，并且将初始的iconfont类改为了[class*='one-icon']，当类名中有one-icon时使用，如下[class*='one-icon'] {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.one-icon-bluetoothoff:before {content: "\e697";}第三步：父组件传递图标名，子组件接收并且放到图标中父组件传值：<div class="row"><one-button icon="bluetoothon"></one-button><one-button type="primary" icon="camera">照相机</one-button><one-button type="success" icon="course"></one-button><one-button type="info" icon="bluetooth_link"></one-button><one-button type="danger" icon="addto"></one-button><one-button type="warning" icon="audio"></one-button></div>子组件接收：icon: {type: String,default: ''}使用接收到的字体图标。在没有传入icon时隐藏<i>标签，在slot插槽没有传入值时，不显示<span>标签<template><button class="one-button" :class="[`one-button-${type}`,{'is-plain':plain,'is-round':round,'is-circle':circle,}]"><i v-if="icon" :class="`one-icon-${icon}`"></i><!-- 如果没传入文本插槽，则不显示span内容 --><span v-if="$slots.default"><slot></slot></span></button></template>第四步：设置icon配套样式，使图标和文字之间有一定间隔.one-button [class*=one-icon-]+span{margin-left: 5px;}

查看效果

nice有没有

到这里

我们想一想element里面还有点击事件怎么实现

button组件中的点击事件我们在使用组件时，直接给组件定义事件是不会被触发的。我们需要在组件中定义一个点击事件，这个点击事件不进行其他操作，只出发父组件中的点击事件。组件中的定义点击事件：<template><button class="one-button" :class="[`one-button-${type}`,{'is-plain':plain,'is-round':round,'is-circle':circle,}]"@click="handleClick"><i v-if="icon" :class="`one-icon-${icon}`"></i><!-- 如果没传入文本插槽，则不显示span内容 --><span v-if="$slots.default"><slot></slot></span></button></template>定义一个点击事件，这个点击事件的作用是调用父组件中的点击事件，并且回调 methods: {handleClick (e) {this.$emit('click', e)}}父组件在使用时定义自己的点击事件，其本质是子组件中的点击事件触发父组件中的点击事件。<div class="row"><one-button @click="getInfo">按钮</one-button></div>methods: {getInfo () {console.log('获取信息！！')//获取信息！！}}

就很nice

按钮中会设置是否禁用

我们可以通过父子传值

给子组件设置样式实现

button组件中的disabled属性和之前相似，只要父子组件传值并且动态获取这个值并且赋给disabled属性,并且设置一个disabled样式即可。<div class="row"><one-button @click="getInfo" disabled>按钮</one-button></div><template><button class="one-button" :class="[`one-button-${type}`,{'is-plain':plain,'is-round':round,'is-circle':circle,'is-disabled':disabled}]"@click="handleClick":disabled="disabled"><i v-if="icon" :class="`one-icon-${icon}`"></i><span v-if="$slots.default"><slot></slot></span></button></template>disabled: {type: Boolean,default: false}disabled样式：.one-button.is-disabled{cursor: no-drop;}

至此 element中的button组件就封装完成了是不是很nice

下次有时间继续封转其他的

看看封装的总代码

<template><button class="one-button" :class="[`one-button-${type}`,{'is-plain':plain,'is-round':round,'is-circle':circle,'is-disabled':disabled}]"@click="handleClick":disabled="disabled"><i v-if="icon" :class="`one-icon-${icon}`"></i><!-- 如果没传入文本插槽，则不显示span内容 --><span v-if="$slots.default"><slot></slot></span></button>
</template><script>export default {name: 'oneButton',// 此时对props进行校验，值接收string类型的type值props: {type: {type: String,// 设置默认值：如果不传值，那么使用defaultdefault: 'defalut'},plain: {type: Boolean,default: false},round: {type: Boolean,default: false},circle: {type: Boolean,default: false},icon: {type: String,default: ''},disabled: {type: Boolean,default: false}},created () {// 显示所有插槽// console.log(this.$slots)},methods: {// 定义一个点击事件，这个点击事件的作用是调用父组件中的点击事件，并且回调handleClick (e) {this.$emit('click', e)}}
}
</script><style lang="scss" scoped>.one-button{display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;background: #ffffff;border: 1px solid #dcdfe6;color: #606266;-webkit-appearance: none;text-align: center;box-sizing: border-box;outline: none;margin: 0;transition: 0.1s;font-weight: 500;//禁止元素的文字被选中-moz-user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;padding: 12px 20px;font-size: 14px;border-radius: 4px;&:hover,&:focus{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;}}
.one-button-primary{color:#fff;background-color: #409eff;border-color: #409eff;&:hover,&:focus{background: #66b1ff;background-color: #66b1ff;color: #fff;}}.one-button-success{color:#fff;background-color: #67c23a;border-color: #67c23a;&:hover,&:focus{background: #85ce61;background-color: #85ce61;color: #fff;}}.one-button-info{color:#fff;background-color: #909399;border-color: #909399;&:hover,&:focus{background: #a6a9ad;background-color: #a6a9ad;color: #fff;}}.one-button-warning{color:#fff;background-color: #e6a23c;border-color: #e6a23c;&:hover,&:focus{background: #ebb563;background-color: #ebb563;color: #fff;}}.one-button-danger{color:#fff;background-color: #f56c6c;border-color: #f56c6c;&:hover,&:focus{background: #f78989;background-color: #f78989;color: #fff;}}
// 朴素按钮样式
.one-button.is-plain{&:hover,&:focus{background: #fff;border-color: #489eff;color: #409eff;}
}
.one-button-primary.is-plain{color: #409eff;background: #ecf5ff;&:hover,&:focus{background: #409eff;border-color: #409eff;color: #fff;}
}
.one-button-success.is-plain{color: #67c23a;background: #c2e7b0;&:hover,&:focus{background: #67c23a;border-color: #67c23a;color: #fff;}
}
.one-button-info.is-plain{color: #909399;background: #d3d4d6;&:hover,&:focus{background: #909399;border-color: #909399;color: #fff;}
}
.one-button-warning.is-plain{color: #e6a23c;background: #f5dab1;&:hover,&:focus{background: #e6a23c;border-color: #e6a23c;color: #fff;}
}
.one-button-danger.is-plain{color: #f56c6c;background: #fbc4c4;&:hover,&:focus{background: #f56c6c;border-color: #f56c6c;color: #fff;}
}
// round属性
.one-button.is-round{border-radius: 20px;padding: 12px 23px;
}
// circle属性
.one-button.is-circle{border-radius: 50%;padding: 12px;
}
// icon配套样式
.one-button [class*=one-icon-]+span{margin-left: 5px;
}
// disabled属性
.one-button.is-disabled{cursor: no-drop;
}
</style>