快捷導(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;">加入購(gòu)物車(chē)</Button>

實(shí)現(xiàn)效果

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue遞歸組件+Vuex開(kāi)發(fā)樹(shù)形組件Tree--遞歸組件的簡(jiǎn)單實(shí)現(xiàn)
這篇文章也是我自己開(kāi)發(fā)的從無(wú)到有的過(guò)程，所以它可以為你提供一些Tree組件開(kāi)發(fā)的思路，本文重點(diǎn)給大家介紹vue遞歸組件的簡(jiǎn)單實(shí)現(xiàn)，感興趣的朋友跟隨小編一起看看吧
2019-04-04
vue?watch中如何獲取this.$refs.xxx節(jié)點(diǎn)
這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點(diǎn)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
詳解Vue3常用的6種組件通信方式
我們用Vue3開(kāi)發(fā)項(xiàng)目時(shí),常常需要面對(duì)的一個(gè)問(wèn)題就是組件之間的通信,如何將數(shù)據(jù)發(fā)給對(duì)應(yīng)的組件,這是不可避免的一個(gè)問(wèn)題,該篇講述了Vue3常用的6種組件通信方式,需要的朋友可以參考下
2024-09-09
vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問(wèn)題
這篇文章主要介紹了vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
關(guān)于element的表單組件整理筆記
這篇文章主要給大家介紹了關(guān)于element的表單組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
Vue接入高德地圖的完整實(shí)例
近期在用vue做一個(gè)環(huán)保類(lèi)的項(xiàng)目,要求使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue接入高德地圖的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
vue?過(guò)濾、模糊查詢(xún)及計(jì)算屬性?computed詳解
計(jì)算屬性是vue里面為了簡(jiǎn)化在模板語(yǔ)法中對(duì)響應(yīng)式屬性做計(jì)算而存在的，這篇文章主要介紹了vue?過(guò)濾、模糊查詢(xún)（計(jì)算屬性?computed）,需要的朋友可以參考下
2022-11-11
Vue中watch和methods兩種屬性的作用
這篇文章主要介紹了Vue中watch和methods兩種屬性的作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-02-02
利用Vue3實(shí)現(xiàn)鼠標(biāo)跟隨效果
在Web開(kāi)發(fā)領(lǐng)域,鼠標(biāo)跟隨效果是一種能顯著提升頁(yè)面交互性、增加動(dòng)態(tài)感與趣味性的常見(jiàn)方式,下面我們看看如何使用Vue3實(shí)現(xiàn)鼠標(biāo)跟隨效果吧
2024-11-11
vue3中reactive數(shù)據(jù)被重新賦值后無(wú)法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無(wú)法雙向綁定的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05