最近看了《某科学的一方通行》,突然就很喜欢一方通行大爷的性格和爽朗的笑声,于是打算写一个小插件碰瓷一下一方通行大爷的名字。
DOM
对象必须要拥有父元素import {Accelerator} from 'acceleratorkunn'
const domEl = document.createElement('div')
document.body.appendChild(domEl)
new Accelerator(domEl)
vue
中使用的话有更加简单的方式:import { VueAccelerator } from 'acceleratorkunn'
Vue.use(VueAccelerator)
然后就会全局注册一个v-accelerator
的vue
指令,和一个accelerator
组件。
指令使用方法:
<div v-accelerator></div>
组件使用方法:
<accelerator></accelerator>
更复杂的用法后面再讲。
new Accelerator(domEl,config)
接收两个参数:
domEl
: 之前解释过,这个参数必须是一个DOM对象,而且必须拥有父元素。必填。config
: 配置,(Object)config.x
(String | Number) 默认值:'0px'
domEl
的x
坐标,等同于绝对定位中的left
。这个值可以是数字,也可以是字符串,但只支持'px'和'%'两种单位,没有单位则默认是'px',例:10,'10','10px','20%'等等。
domEl
的x
坐标会根据百分比来重新计算改变位置,例:父元素宽度为800px,设x为20%,那么此时domEl的left应该是160px。当父元素宽度变为1000px时,此时domEl的left会重新计算变成200px。left
值,单位为'px'config.y
(String | Number) 默认值:'0px'
domEl
的y
坐标,等同于绝对定位中的top
。这个值可以是数字,也可以是字符串,但只支持'px'和'%'两种单位,没有单位则默认是'px',例:10,'10','10px','20%'等等。
domEl
的y
坐标会根据百分比来重新计算改变位置。例:父元素高度为800px,设y为20%,那么此时domEl的top应该是160px。当父元素高度变为1000px时,此时domEl的top会重新计算变成200px。top
值,单位为'px'config.width
(String | Number) 默认值:'200px'
domEl
的宽度。这个值可以是数字,也可以是字符串,但只支持'px'和'%'两种单位,没有单位则默认是'px',例:10,'10','10px','20%'等等。
domEl
的宽度会根据百分比来重新计算改变位置。例:父元素宽度为800px,设width为20%,那么此时domEl的宽度应该是160px。当父元素宽度变为1000px时,此时domEl的宽度会重新计算变成200px。config.height
(String | Number) 默认值:'200px'
domEl
的高度。这个值可以是数字,也可以是字符串,但只支持'px'和'%'两种单位,没有单位则默认是'px',例:10,'10','10px','20%'等等。
domEl
的高度会根据百分比来重新计算改变位置。例:父元素高度为800px,设width为20%,那么此时domEl的高度应该是160px。当父元素宽度变为1000px时,此时domEl的高度会重新计算变成200px。config.minWidth
(String | Number) 默认值:'0px'
domEl
的最小宽度。这个值可以是数字,也可以是字符串,但只支持'px'和'%'两种单位,没有单位则默认是'px',例:10,'10','10px','20%'等等。
minWidth
的优先级高于width
,也就是说如果,width比minWidth还要小,那domEl的宽度就会取minWidth的值config.minHeight
(String | Number) 默认值:'0px'
domEl
的最小高度。这个值可以是数字,也可以是字符串,但只支持'px'和'%'两种单位,没有单位则默认是'px',例:10,'10','10px','20%'等等。
minHeight
的优先级高于height
,也就是说如果,height比minHeight还要小,那domEl的高度就会取minHeight的值config.maxWidth
(String | Number) 默认值:undefined
domEl
的最大宽度。这个值可以是数字,也可以是字符串,但只支持'px'和'%'两种单位,没有单位则默认是'px',例:10,'10','10px','20%'等等。
maxWidth
的优先级高于width
,也就是说如果,width比minWidth还要大,那domEl的宽度就会取maxWidth的值config.maxHeight
(String | Number) 默认值:undefined
domEl
的最大高度。这个值可以是数字,也可以是字符串,但只支持'px'和'%'两种单位,没有单位则默认是'px',例:10,'10','10px','20%'等等。
maxHeight
的优先级高于height
,也就是说如果,height比maxHeight还要大,那domEl的高度就会取maxHeight的值config.dragable
(Boolean)默认值 true
domEl
是否可拖拽
config.dragOutable
(Boolean) 默认值 true
domEl
是否可拖拽出父元素
config.resizeable
(Boolean) 默认值 true
domEl
是否可改变大小
config.helpAxis
(Boolean) 默认值 true
domEl
拖拽时是否显示辅助线。
config.adsort
(Boolean) 默认值 true
domEl
拖拽时是否自动吸附,当前拖拽元素离相同父元素下的任意其他 Accelerator实例绑定的子元素 距离小于5px时,会自动吸附上去。
config.axisColor
(String) 默认值: #f557ff 辅助线的颜色。
config.resizeClass
(String)默认值 :''
缩放控制柄的css class,可以用来自定义控制柄的大小,颜色,描边等样式。
config.dragHandler
(String | HTMLElement) 默认值 :''
拖拽控制柄,可以传css或者id值,例如:'.abc','#abc',也可以直接传一个HTMLElement。
config.autoCount
(Boolean) 默认值 false
当实例化一个Accelerator类后,能够根据上一个实例的参数推断出下一个实例的位置大概在哪里:
config.ratio
(Number) 默认值 1
缩放比例,页面父元素有样式 transform:scale(xxx)的时候用的,让元素的移动和缩放适应这个比例
config.zIndex
(Number) 默认值 1
zIndex: zIndex的层级
更改属性值。建议更改属性都通过这个方法来更改,不然很容易出现dom元素不会重新渲染正确位置的bug
const Ac = new accelerator(domEl,{x:'10%'})
console.log(Ac.attr('x')) //10%
const Ac = new accelerator(domEl,{x:'10%'})
Ac.attr('x','100px')
console.log(Ac.config.x) //100px
const Ac = new accelerator(domEl,{x:'10%'})
Ac.attr({
x:'20%',
y:'20%'
})
console.log(Ac.config.x) //20%
console.log(Ac.config.y) //20%
有时候父元素大小改变了,但是domEl的大小没有改变时,可以手动调用这个方法。
手动激活这个元素,但是同一时间内,有且只能有一个元素处于激活状态,想要多选目前要用选框(如果觉得不好用就留言我后面改)
const Ac = new accelerator(domEl,{x:'10%'}) //父元素大小为1000px
//Ac.changeToPx(['x','y'])
//Ac.changeToPx()
Ac.changeToPx('x')
console.log(Ac.config.x) //'100px'
const Ac = new accelerator(domEl,{x:'100px'}) //父元素大小为1000px
//Ac.changeToPercent(['x','y'])
//Ac.changeToPercent()
Ac.changeToPercent('x')
console.log(Ac.config.x) //'10%'
将层级置顶
销毁实例
销毁所有的Accelerator实例。
new Accelerator(domEl,config)
中的config一致
设置Accelerator的config的默认值当前的配置参数,会根据拖拽和改变大小实时改变。
当前实例具有一个唯一id,这个id不允许用户改变。
实例绑定的dom元素
实例绑定的dom元素的父元素
父元素宽度
父元素高度
当前实际的x值,即dom元素left值,和config.x不同,这个值是'px'单位的实际的left值。 例: 父元素宽度为1000px,config.x为10%,x为100px
当前实际的y值,即dom元素top值,和config.y不同,这个值是'px'单位的实际的top值。
当前实际的width值,即dom元素width值,和config.width不同,这个值是'px'单位的实际的width值。
当前实际的height值,即dom元素height值,和config.height不同,这个值是'px'单位的实际的height值。
配置的最小宽度
配置的最小高度
配置的最大宽度
配置的最大高度
是否自动计算下一个位置的值
是否允许拖拽
是否允许拖拽超出父元素
是否允许改变大小
是否显示辅助线
是否自动吸附
辅助线颜色
控制柄css样式
配置的拖拽控制柄
domEl的中心点x值
domEl的中心点y值
当前对象是否激活
辅助线的css
竖线辅助线(注意x是指x坐标为固定值,所以书竖线)
第1,2,3条竖向辅助线
横线辅助线
第1,2,3条横线辅助线
正在调整大小中
正在拖动中
当前对象激活
多选的选框样式,可以使用这个class加上!important来覆盖默认的样式
实例被销毁事件,带有一个事件对象e
const Ac = new Accelerator(domEl)
Ac.on('destroyed',function(e) {
console.log(e)
})
Ac.destroy()
实例即将被销毁
开始拖拽
正在拖拽
拖拽结束
开始缩放大小
正在缩放大小
缩放大小结束
父元素大小改变
config被更新,拖拽和缩放同样会触发这个事件
对象激活,和点击事件无异
首先先注册指令
import { VueAccelerator } from 'acceleratorkunn'
Vue.use(VueAccelerator)
然后就会将v-accelerator
注册成为全局指令。
<div v-accelerator="config"></div>
其中config这个参数和实例化时传入的config是一样的,这个值可传也可以不传。在拖拽和缩放的时候,config的值会实时改变。
<accelerator
v-show="show"
:x = 'x'
:y = 'y'
:width = 'width'
:height = 'height'
:minWidth = 'minWidth'
:minHeight = 'minHeight'
:maxWidth = 'maxWidth'
:maxHeight = 'maxHeight'
:autoCount = 'autoCount'
:dragable = 'dragable'
:dragOutable = 'dragOutable'
:resizeable = 'resizeable'
:helpAxis = 'helpAxis'
:adsort = 'adsort'
:axisColor = 'axisColor'
:resizeClass = 'resizeClass'
:dragHandler = 'dragHandler'
:ratio = 'ratio'
:zIndex = 'zIndex'
@created = 'createdHandler'
@update = 'updateHandler'
@destroyed = 'destroyedHandler'
@beforeDestroy = 'beforeDestroyHandler'
@dragStart = 'dragStartHandler'
@dragMove = 'dragMoveHandler'
@dragEnd = 'dragEndHandler'
@zoomStart = 'zoomStartHandler'
@zoomMove = 'zoomMoveHandler'
@zoomEnd = 'zoomEndHandler'
@resize = 'resizeHandler'
@select = 'selectHandler'
>
<!-- 中间可以是别的任何元素-->
</accelerator>
我开发这个插件的时候,把自己开发的过程记录在了博客里,看到这里的同学要是还有哪里不会的可以去看看,顺便帮我点个小星星呗~ 一方通行开发记录
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。