vue-draggable-resizable放大缩小拖拽功能

最新推荐文章于 2024-07-01 10:25:53 发布

tamia_nice

最新推荐文章于 2024-07-01 10:25:53 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47144417/article/details/126180558

版权

vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果图
在这里插入图片描述

1.下载依赖

npm install --save vue-draggable-resizable

main.js引入

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

3.页面.vue文件中引入

  <div class="vue-draggable-resizable-div">
      <vue-draggable-resizable
        w="auto"
        h="auto"
        :grid="[20, 40]"
        :x="10"
        :y="10"
        :resizable="false"
      >
        <div
          class="tabledraggable-resizable"
          ref="table"
          @wheel.prevent="handleTableWheel($event)"
        >
          <div v-html="datahtml"></div>
        </div>
      </vue-draggable-resizable>
    </div>

export default {
  data() {
    return {
      datahtml: ` <h1>标题1</h1>
            <h2>标题2</h2>
            <h3>标题3</h3>
            <h4>标题4</h4>`,
            }
            }，
  methods: {
    handleTableWheel(event) {
      let obj = this.$refs.table;
      return this.tableZoom(obj, event);
    },
    tableZoom(obj, event) {
      // 一开始默认是100%
      let zoom = parseInt(obj.style.zoom, 10) || 100;
      // 滚轮滚一下wheelDelta的值增加或减少120
      zoom += event.wheelDelta / 12;
      if (zoom > 0) {
        obj.style.zoom = zoom + "%";
      }
      return false;
    }
    }

.vue-draggable-resizable-div {
  position: relative;
  margin: auto;
  width: 50%;
  height: 200px;
  background-color: orange;
  overflow-y: auto;
}
.draggable {
  position: relative;
  margin: auto;
  width: 50%;
  background-color: pink;
}