vue3使用vue3-draggable-resizable

<template>
  <div id="app">
    <div class="parent">
      <Vue3DraggableResizable v-if="cunzai" :initW="110" :initH="120" v-model:x="x" v-model:y="y" v-model:w="w" v-model:h="h"
        v-model:active="active" :handles="['tl','tm','mr','ml','bl','bm','br']" :disabledX="disabledX" :draggable="true" :resizable="true" :parent="true"
        :containment="'parent'" @activated="print('activated')" @deactivated="print('deactivated')"
        @drag-start="print('drag-start')" @resize-start="print('resize-start')" @dragging="print('dragging')"
        @resizing="print('resizing')" @drag-end="print('drag-end')" @resize-end="print('resize-end')">

        <div class="close" @click="close()"><Icon size="20" type="ios-close-circle-outline" /></div>
      </Vue3DraggableResizable>
    </div>
  </div>
</template>

<!-- <script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
  components: { Vue3DraggableResizable },
  data() {
    return {
      x: 100,
      y: 100,
      h: 100,
      w: 100,
      active: false

    }
  },
  methods: {
    print(val) {
      console.log(val)
    }
  }
})
</script> -->

<script setup>
import { ref, watch } from 'vue';
import { onMounted, onUnmounted } from '@vue/runtime-core';
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

const x = ref(0);
const y = ref(0);
const w = ref(110);
const h = ref(120);
const active = ref(false);
const disabledX = ref(false)
const print = (val) => {
  console.log(val)
}

const cunzai = ref(true);
function close(){
  cunzai.value=false
}

onMounted(() => {

})
// 使用 watch 来监控 x 的变化
watch(x, (newValue, oldValue) => {
  console.log(`x changed from ${oldValue} to ${newValue}`);
  if (newValue > 500) {
    //disabledX.value = true;
  }
});



</script>

<style>
.parent {
  width: calc(100% - 200px);
  height: calc(100% - 200px);
  position: absolute;
  /* top: 100px;
  left: 100px; */
  border: 1px solid #000;
  user-select: none;
  top: -4px;
  left: -4px;
}
.close{
  position: absolute;
  top: -10px;
  right: -10px;
}
</style>

效果：

可移动，放大缩小关闭。