今天给小伙伴们推荐2个很棒的基于 Vue.js 拖拽与缩放组件VueDragResize，并贴上Github地址和代码示例。

231d717b3e9c8b1d96fbf27f381e2cdd.png

1、Vue-Drag-Resize

vue-drag-resize 是一款高质量的基于 Vue.js 用于可调整大小和可拖动元素插件，没有外部依赖。

cb2f055cc3398455652daf3dffa6b288.png

安装

$ npm i vue-drag-resize -S

插件使用

logo-vue.png

*如果使用拖拽缩放后，出现文本框input无法输入的情况，可尝试使用以下方法解决。

methods: {  onActivated() {    this.$refs['yourinput'].focus();  }}

附上示例链接及仓库地址

# 预览地址http://kirillmurashov.com/vue-drag-resize/# github地址https://github.com/kirillmurashov/vue-drag-resize
dc0d1bbd1e5a1081b7f75ce34bace089.png

2、VueDraggableResizable

vue-draggable-resizable 基于 Vue2 的高定制化拖拽缩放组件，让页面拖拽缩放变得如此简单！

eae800e80794394a948a3dec22bcaff1.png
242f0d13f7f7e96a54967525f16ae844.png

安装

$ npm i vue-draggable-resizable -S

插件使用

Hello! I'm a flexible component. You can drag me around and you can resize me.
X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}

提供各种演示示例及源码展示，总有一个适合你。

813b4c03d83106f108a88e3114b879cf.png 
# 预览地址https://mauricius.github.io/vue-draggable-resizable/# github地址https://github.com/mauricius/vue-draggable-resizable

ok，今天的分享就到这里。如果感兴趣可以自己去尝试一下哈~~~

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue