vue自定義封裝按鈕元件
阿新 • • 發佈:2021-09-24
按鈕元件的自定義封裝程式碼,供大家參考,具體內容如下
封裝按鈕元件 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&gwww.cppcns.comt; <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:客棧16www.cppcns.compx; } .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>
實現效果
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。