大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说用Vue3造个轮子吧：拖拽缩放组件，支持吸附对齐，实时参考线「终于解决」,希望您对编程的造诣更进一步.
前言
这篇文章主要来分享下我以前用 Vue3 写的一个组件，
项目地址 ： Vue3DraggableResizable
组件功能
-
支持拖拽和缩放，可分别定义开启或关闭
-
自定义缩放句柄（缩放时共有八个方位可操作，可分别定义开启或关闭）
-
可将组件的拖动和缩放限制在其父节点内
-
可自定义组件内各种类名
-
可配合内置的
DraggableContainer组件方便地实现参考线以及自动吸附功能。
该组件所支持的参数和事件加起来有几十种，可进行各种配置，具体可查看Github的详细文档。
下面我来介绍下使用方式。
基本功能
首先要注册组件：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//需引入默认样式
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
// 你将会获得一个名为Vue3DraggableResizable的全局组件
createApp(App).use(Vue3DraggableResizable).mount('#app')
执行use(Vue3DraggableResizable)后将会全局注册两个组件：Vue3DraggableResizable和DraggableContainer，Vue3DraggableResizable是拖拽缩放用的组件，DraggableContainer可用来实现参考线和自动吸附。
注册后就可以使用了：
<template>
<div id="app">
<div class="parent">
<Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
</div>
</div>
</template>
<script> import { defineComponent } from 'vue' export default defineComponent({ data() { return { msg: 'Hello World. Hello World. Hello World.' } } }) </script>
<style lang="less" scoped> .parent { width: 300px; height: 300px; position: absolute; top: 100px; left: 200px; position: relative; border: 1px solid #000; } </style>
很简单，直接使用即可，可以在Vue3DraggableResizable内放任何东西。
也可以锁定比例，只需要传入:lockAspectRatio="true"参数就可以了：
<Vue3DraggableResizable :lockAspectRatio="true">
{{ msg }}
</Vue3DraggableResizable>
也可以让组件只在 X 轴上移动或只在 Y 轴上移动，传入disabledX或disabledY即可：
<Vue3DraggableResizable :disabledX="true"> {{ msg }} </Vue3DraggableResizable>
可通过parent属性控制组件是否只能在其父节点内移动：
<Vue3DraggableResizable :parent="true"> {{ msg }} </Vue3DraggableResizable>
除了我介绍的这几个，还有其他很多功能，感兴趣的话可以去 GitHub 上看详细的文档。
下面我介绍下参考线和吸附对齐的功能。
参考线、吸附对齐
这个功能需要配合DraggableContainer组件一起使用。
<template>
<div id="app">
<div class="parent">
<DraggableContainer>
<Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
<Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
</DraggableContainer>
</div>
</div>
</template>
<script> import { defineComponent } from 'vue' export default defineComponent({ data() { return { msg: 'Hello World. Hello World. Hello World.' } } }) </script>
<style lang="less" scoped> .parent { width: 300px; height: 300px; position: absolute; top: 100px; left: 200px; position: relative; border: 1px solid #000; .vdr-container { background-color: #999; } } </style>
在刚才的基础上，直接用DraggableContainer组件套一下就可以了。其子组件Vue3DraggableResizable在移动时候就会自动吸附。
可以使用adsorbParent属性，该属性用来控制靠近父元素边缘时，是否自动吸附对齐，默认为true
<template>
<div id="app">
<div class="parent">
<DraggableContainer :adsorbParent="true">
<Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
</DraggableContainer>
</div>
</div>
</template>
你也可以通过adsorbCols或adsorbRows自定义列或行的校准线，元素在靠近这些线时，会产生吸附，
<DraggableContainer :adsorbCols="[10, 50, 100]" :adsorbParent="false">
<Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
</DraggableContainer>
也可以修改参考线颜色：
<DraggableContainer :referenceLineColor="#0f0">
<Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
</DraggableContainer>
当然也可以不显示参考线：
<DraggableContainer :referenceLineVisible="false">
<Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
</DraggableContainer>
参考线虽然不显示，但是自动吸附仍然生效。
最后
这是去年写的一个项目，现在拿出来分享下，如果在使用中有什么问题的话，欢迎在评论区或者 GitHub 上和我交流。
看到这里就点个赞吧，感谢~~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13204.html
