MyUI按钮VcButton 组件文档

VcButton 组件文档

简介

VcButton 是一个高度可定制的按钮组件,支持多种样式、尺寸和状态。

基本用法

html

复制代码
<vc-button type="primary">主要按钮</vc-button>

属性

属性名 类型 默认值 说明
type String 'primary' 按钮类型,可选值见下方类型表
size String 'md' 按钮尺寸,可选'sm', 'md', 'lg'
icon String - 图标类名
iconPosition String 'left' 图标位置,'left'或'right'
block Boolean false 是否块级按钮
disabled Boolean false 是否禁用
rounded Boolean false 是否圆角
loading Boolean false 是否加载中

按钮类型

基础类型

html

复制代码
<vc-button type="primary">主要</vc-button>
<vc-button type="secondary">次要</vc-button>
<vc-button type="success">成功</vc-button>
<vc-button type="danger">危险</vc-button>
<vc-button type="warning">警告</vc-button>
<vc-button type="info">信息</vc-button>
<vc-button type="light">浅色</vc-button>
<vc-button type="dark">深色</vc-button>

Material Design 风格

html

复制代码
<vc-button type="material-primary">Material 主要</vc-button>
<vc-button type="material-success">Material 成功</vc-button>

Neon 霓虹风格

html

复制代码
<vc-button type="neon-blue">Neon 蓝色</vc-button>
<vc-button type="neon-pink">Neon 粉色</vc-button>

Glow 发光风格

html

复制代码
<vc-button type="glow-primary">Glow 主要</vc-button>
<vc-button type="glow-success">Glow 成功</vc-button>

Float 浮动风格

html

复制代码
<vc-button type="float-primary">Float 主要</vc-button>
<vc-button type="float-purple">Float 紫色</vc-button>

Minimal 极简风格

html

复制代码
<vc-button type="minimal-primary">Minimal 主要</vc-button>
<vc-button type="minimal-dark">Minimal 深色</vc-button>

3D 风格

html

复制代码
<vc-button type="3d-primary">3D 主要</vc-button>
<vc-button type="3d-danger">3D 危险</vc-button>

Gradient 渐变风格

html

复制代码
<vc-button type="gradient-primary">渐变 主要</vc-button>
<vc-button type="gradient-success">渐变 成功</vc-button>

事件

事件名 说明 回调参数
click 点击事件 MouseEvent

插槽

名称 说明
default 按钮内容

示例

vue页面

复制代码
<vc-button type="3d-primary" class="mr-2">开始使用</vc-button>
<vc-button type="minimal-primary" class="mr-2">查看演示</vc-button>

js

复制代码
import VcButton from '@/components/Button/Button.vue';
export default {
  name: 'HomePage',
  components: {
    VcButton
  },

鼠标悬停点击动画

复制代码
<vc-button type="primary" icon="fas fa-check" icon-position="right">
  提交
</vc-button>

<vc-button type="danger" size="lg" :loading="true">
  删除
</vc-button>

<vc-button type="gradient-primary" rounded>
  渐变按钮
</vc-button>

<vc-button type="neon-blue" block>
  全宽霓虹按钮
</vc-button>
相关推荐
小小小小宇43 分钟前
前端监测用户卡顿之INP
前端
小小小小宇1 小时前
监测用户在浏览界面过程中的卡顿
前端
糖墨夕1 小时前
Nest 是隐藏的“设计模式大佬”
前端
David爱编程1 小时前
JDK vs JRE:到底有什么本质区别?99% 的人都答不上来
java·后端
xkroy2 小时前
javaJVM ‘
服务器
逾明2 小时前
Electron自定义菜单栏及Mac最大化无效的问题解决
前端·electron
洛阳泰山2 小时前
基于 Easy Rules 的电商订单智能决策系统:构建可扩展的业务规则引擎实践
java·开发语言·规则引擎·easy rules
辰九九2 小时前
Uncaught URIError: URI malformed 报错如何解决?
前端·javascript·浏览器
月亮慢慢圆2 小时前
Echarts的基本使用(待更新)
前端
fulangxisikexi2 小时前
bgp笔记
服务器·网络·笔记