# Dragbox 拖动块
# 介绍
一个可拖动的规则图形的盒子。
# 引入
在 main.js 中引入，详细介绍见快速上手。
# 使用
引入组件后，可以在Vue文件中使用
<vs-dragbox></vs-dragbox>
1
# 代码演示
# 方块尺寸
有width和height两个属性，默认为80*80（单位：px）。
<vs-dragbox width="'40px"></vs-dragbox>
<vs-dragbox height="'24px"></vs-dragbox>
<vs-dragbox width="'40px" height="24px"></vs-dragbox>
1
2
3
2
3
# 背景颜色
可定制拖动块的背景颜色。
<vs-dragbox color="black">黑色背景</vs-dragbox>
1
# 拖动方向
可以限制物块移动的方向，横向或纵向，通过调整direction属性为值x或y，默认不限制方向。
<vs-dragbox direction="x">只能横向移动</vs-dragbox>
1
# 限制区域
可以限制物块移动的范围，maxX和maxY接收最大的横向和纵向移动距离，最小为0（如无maxX和maxY则无限制）。
<vs-dragbox maxX="400px">横向在0~400px之间活动</vs-dragbox>
<vs-dragbox maxY="200px">纵向在0~200px之间活动</vs-dragbox>
<vs-dragbox maxX="400px" maxY="200px">从(0, 0)到(400, 200)之间</vs-dragbox>
1
2
3
2
3
# 禁用状态
布尔值属性disabled，开启则为true，同时背景的亮度会降低。
<vs-dragbox disabled>禁用状态</vs-dragbox>
1
# 物块形状
字符串属性shape接收一个值round，即为圆形（长方形尺寸下为椭圆）。
<vs-dragbox shape='round'>禁用状态</vs-dragbox>
1
← Icon 图标 Divider 分割线 →
