mauricius / vue-draggable-resizable

Vue3 Component for draggable and resizable elements.
https://mauricius.github.io/vue-draggable-resizable/
MIT License
3.34k stars 560 forks source link

when parent element change size,component resize has bug #251

Closed lzq920 closed 4 years ago

lzq920 commented 4 years ago
<template>
  <div id="app">
    <div style=" border: 1px solid red; position: relative;" @dblclick.self="changeSize" :style="style">
      <vue-draggable-resizable :w="400" :h="400" :parent="true" :debug="false" :min-width="200" :min-height="200">
        <p>vue-draggable-resizable</p>
      </vue-draggable-resizable>
    </div>
  </div>
</template>

<script>
import VueDraggableResizable from './components/vue-draggable-resizable'
import './components/vue-draggable-resizable.css'

export default {
  name: 'app',
  components: {
    VueDraggableResizable
  },
  data () {
    return {
      style: {
        height: '500px',
        width: '500px'
      }
    }
  },
  methods: {
    changeSize () {
      this.style = {
        height: '1000px',
        width: '1000px'
      }
      this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'))
      })
    }
  }
}
</script>

<style>
  .vdr {
    border: 1px dashed black;
  }
</style>