vue自定義封裝按鈕組件
更新時間：2021年09月23日 11:29:44 作者：run-Ameng
這篇文章主要為大家詳細(xì)介紹了vue自定義封裝按鈕組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue按鈕組件的自定義封裝代碼，供大家參考，具體內(nèi)容如下
封裝按鈕組件 button.vue
<template>
<button class="button ellipsis" :class="[size,type]">
<slot />
</button>
</template>
<script>
export default {
name: 'Button',
props: {
size: {
type: String,
default: 'middle'
},
type: {
type: String,
default: 'default'
}
}
}
</script>
<style scoped lang="less">
.button {
appearance: none;
border: none;
outline: none;
background: #fff;
text-align: center;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.large {
width: 240px;
height: 50px;
font-size: 16px;
}
.middle {
width: 180px;
height: 50px;
font-size: 16px;
}
.small {
width: 100px;
height: 32px;
font-size: 14px;
}
.mini {
width: 60px;
height: 32px;
font-size: 14px;
}
.default {
border-color: #e4e4e4;
color: #666;
}
.primary {
border-color: #27BA9B;;
background: #27BA9B;;
color: #fff;
}
.plain {
border-color:#27BA9B;;
color:#27BA9B;;
background: lighten(#27BA9B;,50%);
}
.gray {
border-color: #ccc;
background: #ccc;;
color: #fff;
}
</style>
封裝組件的使用
<Button type="primary" style="margin-top:20px;">自定義按鈕名字</Button> <Button type="primary" style="margin-top:20px;">加入購物車</Button>
實(shí)現(xiàn)效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
axios+vue請求時攜帶cookie的方法實(shí)例
做項(xiàng)目時遇到一個需求,后端需要在接口請求時,對用戶登陸狀態(tài)進(jìn)行判斷,需要在請求時攜帶Cookie,下面這篇文章主要給大家介紹了關(guān)于axios+vue請求時攜帶cookie的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聊天框發(fā)送表情，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue3+vite2+mqtt連接遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue ref如何獲取子組件屬性值。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue是目前非常流行的前端開發(fā)框架,隨著技術(shù)的不斷更新,我們也需要更新我們的vue項(xiàng)目,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目如何刪除無用的依賴的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue3+element?Plus使用el-tabs標(biāo)簽頁解決頁面刷新不回到默認(rèn)頁的問題
這篇文章主要介紹了vue3+element?Plus使用el-tabs標(biāo)簽頁頁面刷新不回到默認(rèn)頁的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了VUE更換背景顏色的方法,?在這個示例中,我們使用了一個backgroundColor變量來存儲當(dāng)前頁面的背景顏色,當(dāng)用戶點(diǎn)擊按鈕時,我們通過調(diào)用setBackgroundColor方法來更改背景顏色,并將背景顏色同時應(yīng)用于body元素,需要的朋友可以參考下2024-03-03
ruoyi-vue3 集成aj-captcha實(shí)現(xiàn)滑塊、文字點(diǎn)選驗(yàn)證碼功能
這篇文章主要介紹了 ruoyi-vue3 集成aj-captcha實(shí)現(xiàn)滑塊、文字點(diǎn)選驗(yàn)證碼,本文基于后端RuoYi-Vue 3.8.7 和 前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字點(diǎn)選驗(yàn)證碼為例,不需要鍵盤手動輸入,極大優(yōu)化了傳統(tǒng)驗(yàn)證碼用戶體驗(yàn)不佳的問題,感興趣的朋友一起看看吧2023-12-12
本文主要介紹了使用pyscript在網(wǎng)頁中撰寫Python程式的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05