vue-drag-resize实线页面的拖拽与缩放


使用vue-drag-resize实线页面的拖拽与缩放示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<template>
  <!--//需要给VueDragResize套一个div-->
  <div id="app">
    <!--//缩放功能主要是缩放VueDrangResize标签-->
    <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
      <!-- 图片缩放 -->
      <!--将这个div的宽高动态设置==VueDrangResize的宽高这样可实时完成缩放-->
      <div class="box" :style="{width: + vw+ 'px',height:+vh+'px'}"><!--我这写的是本地的图片，图片可以动态获取-->
        <img src="../assets/logo.png" style="width: 100%;height: 100%"></div>
    </VueDragResize>
    <div>
      <h3>Hello World!</h3>
      <p><center>[wp_ad_camp_1]</center></p><p>{{ vw }} х {{ vh }} </p>
      <p>{{ top }} х {{ left }}</p>
    </div>
  </div>
  <!-- 为了缩放图片，所以给img标签外套一个div,动态获取宽高，宽高就是VueDragResize的宽高一样这样就可以实现缩放大小-->
</template>

<style>
</style>

<script>
import VueDragResize from 'vue-drag-resize'

export default {
  components: {
    VueDragResize
  },

  data () {
    return {
      vw: 0,
      vh: 0,
      top: 0,
      left: 0
    }
  },
  created () {
    this.vw = 200 + 'px'
    this.vh = 200 + 'px'
  },
  methods: {
    // 初始化渲染。
    // 缩小
    resize (newRect) {
      this.vw = newRect.width
      this.vh = newRect.height
      this.top = newRect.top
      this.left = newRect.left
    }
  }

}
</script>