vue 自由拖拽_2个很酷的 Vue 自由拖拽+缩放组件

今天给小伙伴们推荐2个很棒的基于 Vue.js 拖拽与缩放组件VueDragResize，并贴上Github地址和代码示例。1、Vue-Drag-Resizevue-drag-resize 是一款高质量的基于 Vue.js 用于可调整大小和可拖动元素插件，没有外部依赖。安装$ npm i vue-drag-resize -S插件使用// outline: n...

生活教会我们

3133人浏览 · 2021-01-19 09:41:04

生活教会我们 · 2021-01-19 09:41:04 发布

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

1、Vue-Drag-Resize

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

安装

$ npm i vue-drag-resize -S

插件使用

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

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

附上示例链接及仓库地址

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

2、VueDraggableResizable

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

安装

$ 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 }}

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

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

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

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}$/, //不连续的两位字母// /^