vue自定义封装按钮组件
更新时间:2021年09月23日 11:29:44 作者:run-Ameng
这篇文章主要为大家详细介绍了vue自定义封装按钮组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
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>
实现效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Vue无法读取HTMLCollection列表的length问题解决
这篇文章主要介绍了Vue无法读取HTMLCollection列表的length问题解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03Vue路由对象属性 .meta $route.matched详解
今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11vue.js出现Vue.js not detected错误的解决方案
这篇文章主要介绍了vue.js出现Vue.js not detected错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09element el-table表格的二次封装实现(附表格高度自适应)
这篇文章主要介绍了element el-table表格的二次封装实现(附表格高度自适应),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-01-01
最新评论