vue自定义指令笔记
2024-10-18 09:34:41
https://cn.vuejs.org/v2/guide/custom-directive.html
在vue中，有时候我们会把抽象的方法封装为一个自定义指令，多个地方共用
比如：拖拽指令
<div id="myChart1" class="myChart1" v-drag>
{{positionX}}
{{positionY}}
</div>
data () {
return {
positionX: ,
positionY: ,
parentWidth: ,
parentHeight:
}
},
directives: {
drag: {
inserted: function (el, binding, vnode) {
let _this = vnode.context // 指令里要想获取vue实例，可以使用vnode.context
let parentWidth = _this.$refs.test.offsetWidth
let parentHeight = _this.$refs.test.offsetHeight
let odiv = el // 获取目标元素
odiv.onmousedown = (e) => {
console.log(e) // 这俩个e一样
// 算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft
let disY = e.clientY - odiv.offsetTop
// 并移动的事件
document.onmousemove = (e) => {
console.log(e) // 这俩个e一样
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left =
let top =
if ((e.clientX - disX) < ) {
left =
} else if ((e.clientX - disX) > (parentWidth - odiv.offsetWidth)) {
left = parentWidth - odiv.offsetWidth
} else {
left = e.clientX - disX
}
if ((e.clientY - disY) < ) {
top =
} else if ((e.clientY - disY) > (parentHeight - odiv.offsetHeight)) {
top = parentHeight - odiv.offsetHeight
} else {
top = e.clientY - disY
}
// 绑定元素位置到positionX和positionY上面
_this.positionX = top
_this.positionY = left
// 移动当前元素
odiv.style.left = left + 'px'
odiv.style.top = top + 'px'
}
document.onmouseup = (e) => {
document.onmousemove = null
document.onmouseup = null
}
}
}
}
},
备注：
1、使用this.$refs获取动态值的时候，要这样写 this.$refs['value']
2、拖拽的div样式要特别注意：position要为absolute，不能用transform: translate()，否则拖拽后样式会异常
最新文章
- Java注解
- CSS选定第k个元素
- coreseek (sphinx)+ Mysql + Thinkphp搭建中文搜索引擎详解
- JavaScript基础整理(1)
- NodeJs - 序列化
- Javascript操作元素属性方法总结
- 拥抱ARM妹子 序章！ARM妹子～～ 哥我来啦！
- Swift - 表格图片加载优化（拖动表格时不加载，停止时只加载当前页图片）
- Programming from the ground up（0）
- ACM_并查集
- ECMAScript 5 新特性
- alertifyjs
- 04_Struts2标签
- img标签里的value获取
- vuex store刷新存储状态
- windows解决访问github慢问题
- Redis消息通知（任务队列和发布订阅模式）
- springmvc处理过程理解（一）
- 使用Charles进行网络请求抓包解析
- Oracle创建Rman备份专用账户