@neosjs/vue-dragresizable

Vue 拖拽放大组件

安装

npm install @neosjs/vue-dragresizable

使用方法

<script lang="ts" setup>
import VueDragresizable from '@neosjs/vue-dragresizable'

const active = ref(['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'])
const fitParent = ref(false)
const width = ref(338)
const height = ref(250)
const maxW = ref('100%')
const maxH = ref('100%')
const minW = ref(338)
const minH = ref(250)
const dragSelector = ref('.drag-header')
const left = ref(`calc( 50% - ${width.value / 2}px)`)
const top = ref(`calc(50% - ${height.value / 2}px)`)
const maximize = ref(false)
const checkEmpty = (value: any) => {
  return typeof value !== 'number' ? 0 : value
}
</script>

<template>
  <div>
    <VueDragresizable 
      :dragSelector="dragSelector"
      :maximize="maximize"
      :active="active"
      :fit-parent="fitParent"
      :width="width"
      :height="height"
      :max-width="checkEmpty(maxW)"
      :max-height="checkEmpty(maxH)"
      :min-width="checkEmpty(minW)"
      :min-height="checkEmpty(minH)"
      :left="left"
      :top="top"
      class="resizable"
    >
      <div class="resizable-content">
        <p class="drag-header">
          <span>标题</span>
        </p>
        <p>这里是内容哦</p>
        <p>这里是内容哦</p>
      </div>
    </VueDragresizable>
  </div>
</template>

参数

参数	说明	类型	默认值
width	初始宽度	String、Number	-
height	初始高度	String、Number	-
max-width	最大宽度	Number	-
max-height	最大高度	Number	-
min-width	最小宽度	Number	0
min-height	最小高度	Number	0
left	初始 left 值	String、Number	0
top	初始 top 值	String、Number	0
active	调整大小的点位(可拖拽放大的点位)	[String]'r'、 'rb'、 'b'、 'lb'、 'l'、 'lt'、 't'、 'rt'	-
fitParent	在父级容器里调整大小	Boolean	false
dragSelector	拖拽选择器	String	-
maximize	是否允许最大化	Boolean	false
disableAttributes	禁用属性	[String]'width'、 'height'、 'left'、 'top'	-

事件

事件名	说明	回调参数
mounted	组件挂载完成时触发	[eventName、left、top、width、height]
destroyed	组件销毁时触发	[eventName、left、top、width、height]
resize:start	开始调整大小时触发	[eventName、left、top、width、height]
resize:move	调整大小时触发	[eventName、left、top、width、height]
resize:end	调整大小结束时触发	[eventName、left、top、width、height]
drag:start	开始拖拽时触发	[eventName、left、top、width、height]
drag:move	拖拽时触发	[eventName、left、top、width、height]
drag:end	拖拽结束时触发	[eventName、left、top、width、height]
maximize	最大化时触发	[eventName、left、top、width、height]