| vue按钮组件的自定义封装代码，供大家参考，具体内容如下 封装按钮组件 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> 实现效果 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods
Vue实现控制商品数量组件封装及使用 |
