vue实现可拖拽可缩放功能

安装vue-draggable-resizable插件 

npm install --save vue-draggable-resizable

全局注册组件main.js中写入：

import Vue from 'vue' import VueDraggableResizable from 'vue-draggable-resizable' // 可选择导入默认样式 import 'vue-draggable-resizable/dist/VueDraggableResizable.css' Vue.component('vue-draggable-resizable', VueDraggableResizable)

局部注册：在使用的组件里引用

src\views\Index.vue

<template> <div class="contentBox"> <vue-draggable-resizable class="drag" :min-width="200" :min-height="200" :max-width="300" parent=".contentBox" class-name-active="my-active-class" class-name="my-class" v-if="journal"> <div class="journal" id="text"> <el-row type="flex" justify="space-between" class="m-b-5 m-t-5"> <el-col :span="12"> <h2 class="h2style" @click="scrollToBottom">日志</h2> </el-col> <el-col :span="12" class="titlebutton m-r-5"> <i class="el-icon-minus"></i> </el-col> </el-row> <el-timeline> <el-timeline-item v-for="(activity, index) in activities" :key="index" type="warning" :timestamp="activity.timestamp"> { 
  {activity.content}} </el-timeline-item> </el-timeline> </div> </vue-draggable-resizable> </div> </template> <script> // 局部注册：在使用的组件里引用 import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizable.css' export default{ name:"Index", components:{ VueDraggableResizable }, data () { return { journal:true, activities: [{ content: '测试数据1', timestamp: '20:46:33' }, { content: '测试数据12', timestamp: '20:45:11' }, { content: '测试数据3', timestamp: '20:44:11' }, { content: '测试数据4', timestamp: '20:44:11' }, { content: '测试数据5', timestamp: '20:44:11' }], } }, watch: { 'processData': 'scrollToBottom' }, scrollToBottom() { this.$nextTick(() => { var div = document.getElementById('text') div.scrollTop = div.scrollHeight }) }, mounted() { this.scrollToBottom() }, updated:function(){ this.scrollToBottom(); }, methods:{ // 聊天定位到底部 scrollToBottom () { this.$nextTick(() => { let ele = document.getElementById('text'); console.log(ele,ele.scrollHeight) ele.scrollTop = ele.scrollHeight; }) }, } } </script> <style scpoed> /* 主体 */ .content{ display: flex; background-color:#f1f1f1; width:100%; height:calc(100% - 90px); top:90px; position:absolute; } .contentBox{ width: calc(100% - 200px); overflow:auto; } .contentBox{ position: relative; } .drag{ padding-left: 10px; position: absolute; top: 0px; left: 0px; } .my-class { background-color:#fff; border: 1px dashed #e6a23c; border-radius: 5px; -webkit-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } .my-active-class { border: 1px dashed #4a4e56; -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); } .handle { width: 6px; height: 6px; border-radius: 50%; } .handle-tl { top: -5px; left: -5px; } .handle-tr{ top: -5px; right: -5px; } .handle-bl{ bottom: -5px; left: -5px; } .handle-br{ bottom: -5px; right: -5px; } .handle-ml{ left: -5px; } .handle-mr{ right: -5px; } .handle-tm{ top: -5px; } .handle-bm{ bottom: -5px; } .journal{ overflow: auto; width: 100%; height: 100%; } </style>

好用的VUE拖拽调试方案

好用的VUE拖拽github方案

Vue-drag-resize 拖拽缩放插件的使用(简单示例)

vue-drag-resize 全解，vue拖拽缩放组件

vue 可拖拽可缩放 vue-draggable-resizable 组件常用总结

vue-draggable-resizable定制化可拖动控件

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11212.html