执行安装  npm install --save vue-draggable-resizable

注册组件引入 
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

使用
    <div v-show="showBigVideoVisible" style="position: fixed; top: 0; left: 0;width: 100vw;height: 100vh;z-index: 300; pointer-events: none;">
      <VueDraggableResizable
        :parent="true"
        :w="1088"
        :h="595"
        :min-width="900"
        :x="332"
        :y="92"
        :min-height="500"
        drag-handle=".canDrag"
        :handles="['tl','tr','bl','br']"
        style="background-color: #e6f7ff !important; box-shadow:4px 4px 15px #666;pointer-events: all;padding: 8px;border-radius: 5px;"
        :class="isFullScreen?'stationStyleFull': 'stationStyle'"
        :visible="showBigVideoVisible"
        @resizing="onResizing"
        @resizestop="onResizstop"
        forceFallback="true"
      >
        <div type="primary" class="canDrag" style="text-align: right">
          <span style="float: left;font-family: math;font-weight: 700;">测点曲线</span>
          <span class="iconstyle"><a-icon v-show="!isFullScreen" type="fullscreen" @click.stop="handleFullScreenOpen"></a-icon></span>
          <span class="iconstyle"><a-icon v-show="isFullScreen" type="fullscreen-exit" @click.stop="handleFullScreenClose"></a-icon></span>
          <span class="iconstyle"><a-icon type="close" @click="handleCaptureZoomInOld"></a-icon></span>
        </div>
        <div :style="{height:modalHeight}" style="overflow-y: hidden;overflow-x: hidden">
          <point-echarts ref="stationEcharts" v-if="showBigVideoVisible" :pointDataQueryParams="pointDataQueryParams" @closeEcharts="closeEcharts"/>
        </div>
      </VueDraggableResizable>
    </div>

:parent="true" 表示是否拖出屏幕 true 禁止

drag-handle=".canDrag" 表示允许拖拽的类元素 注意写法

:handles="['tl','tr','bl','br']" 表示拖拽的方块显示