快捷導(dǎo)航

vue自定義封裝按鈕組件

更新時(shí)間：2021年09月23日 11:29:44 作者：run-Ameng

這篇文章主要為大家詳細(xì)介紹了vue自定義封裝按鈕組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue如何使用本地JSON文件
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
axios+vue請(qǐng)求時(shí)攜帶cookie的方法實(shí)例
做項(xiàng)目時(shí)遇到一個(gè)需求,后端需要在接口請(qǐng)求時(shí),對(duì)用戶登陸狀態(tài)進(jìn)行判斷,需要在請(qǐng)求時(shí)攜帶Cookie,下面這篇文章主要給大家介紹了關(guān)于axios+vue請(qǐng)求時(shí)攜帶cookie的相關(guān)資料,需要的朋友可以參考下
2022-09-09
vue實(shí)現(xiàn)聊天框發(fā)送表情
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聊天框發(fā)送表情，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
vue3+vite2+mqtt連接遇到的坑及解決
這篇文章主要介紹了vue3+vite2+mqtt連接遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue ref如何獲取子組件屬性值
這篇文章主要介紹了vue ref如何獲取子組件屬性值。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue項(xiàng)目如何刪除無用的依賴詳解
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ì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
VUE更換背景顏色的方法
這篇文章主要介紹了VUE更換背景顏色的方法,?在這個(gè)示例中,我們使用了一個(gè)backgroundColor變量來存儲(chǔ)當(dāng)前頁面的背景顏色,當(dāng)用戶點(diǎn)擊按鈕時(shí),我們通過調(diào)用setBackgroundColor方法來更改背景顏色,并將背景顏色同時(shí)應(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)證碼為例,不需要鍵盤手動(dòng)輸入,極大優(yōu)化了傳統(tǒng)驗(yàn)證碼用戶體驗(yàn)不佳的問題,感興趣的朋友一起看看吧
2023-12-12
Vue實(shí)現(xiàn)全局異常處理的幾種方案
本文主要介紹了使用pyscript在網(wǎng)頁中撰寫Python程式的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05