首先我們知道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>

總結

以上是生活随笔為你收集整理的手动封装element-ui里面的button组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。