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中在父组件点击按钮触发子组件的事件
- vue点击按钮动态创建与删除组件功能
- vue实现密码显示与隐藏按钮的自定义组件功能
- vue 表单验证按钮事件交由父组件触发的方法
- vue 点击按钮实现动态挂载子组件的方法
- Vue波纹按钮组件制作
- vue 开发一个按钮组件的示例代码
- vue组件中点击按钮后修改输入框的状态实例代码
本文由 华域联盟 原创撰写:华域联盟 » vue自定义封装按钮组件
转载请保留出处和原文链接:https://www.cnhackhy.com/82137.htm