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>

复制代码

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>