# Button 按钮
# 介绍
点击触发事件，通常用于提交表单。
# 引入
在 main.js 中引入，详细介绍见快速上手。
# 使用
引入组件后，可以在Vue文件中使用
<vs-button></vs-button>
1
# 代码演示
# 按钮插槽
组件使用了Vue提供的插槽语法，支持插入文字，标签，还可以插入组件，默认文字为A Button。
<vs-button></vs-button> <!--默认文字A Button-->
<vs-button>文字</vs-button> <!--文字-->
<vs-button><span>span标签</span></vs-button> <!--插入span标签-->
<vs-button><vs-loading></vs-loading></vs-button> <!--搭配visn的loading组件，表现加载中的效果-->
1
2
3
4
2
3
4
# 按钮尺寸
字符串类型，支持自己定制尺寸大小，有长length和宽width两个属性，默认为16*8（单位：px），通过绑定属性传入。
<vs-button>默认按钮</vs-button>
<vs-button :length="'40px'">长40px按钮</vs-button>
<vs-button :width="'24px'">宽24px按钮</vs-button>
<vs-button :length="'40px'" :width="24px">40*24(px)按钮</vs-button>
1
2
3
4
2
3
4
# 自定义颜色
允许直接输入颜色的英文，或者输入对应RGB值（前加井号#）或RGBA值，默认为blue。
<vs-button bgColor="red">红色按钮</vs-button>
<vs-button bgColor="#abc">RGB</vs-button>
<vs-button bgColor="#abcd">RGBA</vs-button>
1
2
3
2
3
# 悬浮颜色
<vs-button hoverColor="purple">悬浮紫色</vs-button>
1
# 按钮边框
布尔值类型，可以调整边框的有无，边框的默认样式为黑色2px粗，不支持定制 。
<vs-button>自带边框</vs-button>
<vs-button :edge="false">无边框</vs-button>
1
2
2
# 禁用
布尔值类型，默认为false。
<vs-button>使能</vs-button>
<vs-button disabled>禁用</vs-button>
1
2
2
