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>
相关推荐
qianmo2021几秒前
基于pycharm实现html文件的快速实现问题讨论
前端·html
IT_陈寒1 分钟前
SpringBoot3踩坑实录:一个@Async注解让我多扛了5000QPS
前端·人工智能·后端
kura_tsuki5 分钟前
[Web网页] 零基础入门 HTML
前端·html
z晨晨31 分钟前
互联网大厂Java求职面试实战:Spring Boot与微服务场景深度解析
java·spring boot·redis·微服务·kafka·spring security·电商
岁月宁静38 分钟前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
golang学习记38 分钟前
从0死磕全栈之Next.js Server Actions 入门实战:在服务端安全执行逻辑,告别 API 路由!
前端
jz_ddk1 小时前
[嵌入式] U-Boot 环境变量深度解析:从 QSPI 到 eMMC 的 Linux 启动完整指南
linux·运维·服务器·嵌入式·环境变量·u-boot·内核加载
光影少年1 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划
这儿有一堆花1 小时前
三种 弹出广告 代码开发实战
前端·html
练习时长一年1 小时前
Bean后处理器
java·服务器·前端