# 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 分割线 →