旋转边框按钮

-

一个具有旋转边框动画效果的按钮组件。

基础用法

<RotateBorderButton text="点击按钮" type="primary" />

loading

属性说明

属性名	说明	类型	可选值	默认值
text	按钮文本	String	-	'button'
type	按钮类型	String	primary/info/success /warning/danger/default	'primary'
size	按钮尺寸	String	large/default/small	'default'
width	按钮宽度	String	-	-
height	按钮高度	String	-	-
disabled	是否禁用	Boolean	true/false	false
loading	是否显示加载状态	Boolean	true/false	false
backgroundColor	按钮背景色	String	-	'#ffffff'

插槽

插槽名	说明
icon	按钮图标插槽

事件

事件名	说明	回调参数
click	点击按钮时触发（在禁用或加载状态下不会触发）	-

尺寸大小 size

提供三种尺寸

large/default/small，通过size属性来设置

<RotateBorderButton size="large" text="大型按钮" />
<RotateBorderButton size="default" text="默认按钮" />
<RotateBorderButton size="small" text="小型按钮" />

loading

按钮类型 type

提供六种类型

primary/info/success/warning/danger/default，通过type属性来设置

<RotateBorderButton size="large" text="大型按钮" />
<RotateBorderButton size="default" text="默认按钮" />
<RotateBorderButton size="small" text="小型按钮" />

loading

加载状态 loading

TIP

设置loading属性为true时，按钮会显示加载状态

<RotateBorderButton text="加载中" type="primary" :loading="true" />

loading

禁用状态 disabled

TIP

设置disabled属性为true时，按钮会显示禁用状态

<RotateBorderButton text="禁用" type="danger" :disabled="true" />

loading

自定义图标 icon

TIP

通过icon插槽来自定义图标

<RotateBorderButton type="warning" text="带图标的按钮">
  <template #icon>
    <el-icon size="15">
      <Edit />
    </el-icon>
  </template>
</RotateBorderButton>

loading

自定义背景色 backgroundColor

TIP

通过backgroundColor属性来自定义按钮背景色

<RotateBorderButton type="danger" text="自定义背景" backgroundColor="#6bc09c" />

loading

自定义尺寸 width/height

可以通过 width 和 height 属性设置按钮的具体尺寸：

TIP

通过 width 和 height 属性设置按钮的具体尺寸

<RotateBorderButton text="自定义尺寸" width="200px" height="50px" />

loading

特性

• 具有旋转边框动画效果
• 支持多种类型和尺寸
• 支持加载状态显示
• 支持自定义图标
• 支持禁用状态
• 支持自定义背景色
• 支持自定义宽高
• 支持点击事件
• 响应式动画过渡效果

注意事项

1. 按钮的 type 属性会影响按钮的颜色主题
2. 禁用状态或加载状态下按钮不会触发 click 事件
3. 自定义宽高时需要传入带单位的字符串值（如：'100px'）
4. 加载状态会显示一个旋转的加载图标
5. 当使用图标插槽时，图标与文本之间会自动添加间距
6. 背景色可以通过 backgroundColor 属性自定义，支持任何有效的 CSS 颜色值