拖动缩放

操作元素在父级容器元素内部移动，以及缩放。

安装

INFO

如果还需要使用其他组件，请参考全量组件安装

如果仅需要使用当前组件，执行以下命令单独安装:

npm

npm install @havue/drag-and-scale --save

yarn

yarn add @havue/drag-and-scale

pnpm

pnpm install @havue/drag-and-scale

引入

<script>
import { HvDragAndScale } from 'havue'
// or 
import { HvDragAndScale } from '@havue/components'
// or
import { HvDragAndScale } from '@havue/color-picker'
</script>

示例

设置容器实际尺寸为1920*1080。

第一个黑色元素限制最小尺寸64*64，保持宽高比，限制在容器中移动。

第二个灰色元素限制最小尺寸128*128，最大尺寸512*300。

min: 64*64

keepRatio: true

inContaienr: true

min: 128*128

max: 512*300

keepRatio: false

inContaienr: false

点我看代码

template

<template>
  <div class="drag-area" ref="containerRef">
    <DragAndScale
      :container="containerRef"
      :containerRealSize="containerRealSize"
      :keepRatio="{
        enable: true,
        scaleCase: 'min'
      }"
      :limit="{ minWidth: 64, minHeight: 64 }"
      :disabled="false"
      class="drag-box"
      @change="handleChange"
      :style="dragStyle"
    >
      <div class="inner-box">
        <div>min: 64*64</div>
        <div>keepRatio: true</div>
        <div>inContaienr: true</div>
      </div>
    </DragAndScale>
    <DragAndScale
      :container="containerRef"
      :containerRealSize="containerRealSize"
      :keepRatio="{
        enable: false,
        scaleCase: 'min'
      }"
      :limit="{ inContainer: false, minWidth: 128, minHeight: 128, maxWidth: 512, maxHeight: 300 }"
      :disabled="false"
      class="drag-box"
      @change="handleChange2"
      :style="dragStyle2"
    >
      <div class="inner-box">
        <div>min: 128*128</div>
        <div>max: 512*300</div>
        <div>keepRatio: false</div>
        <div>inContaienr: false</div>
      </div>
    </DragAndScale>
  </div>
</template>

script

<script setup lang="ts">
import type { DragAndScaleChangeResultType } from '@havue/drag-and-scale'
import { ref, computed } from 'vue'
// import { HvDragAndScale as DragAndScale } from '@havue/drag-and-scale'
import { HvDragAndScale as DragAndScale } from '@havue/components'
const containerRef = ref()

const dragPosition = ref({
  x: 50,
  y: 50,
  width: 100,
  height: 50
})

const dragPosition2 = ref({
  x: 230,
  y: 50,
  width: 100,
  height: 50
})

const containerRealSize = ref({ width: 1920, height: 1080 })

const dragStyle = computed(() => {
  return {
    top: `${dragPosition.value.y}px`,
    left: `${dragPosition.value.x}px`,
    width: `${dragPosition.value.width}px`,
    height: `${dragPosition.value.height}px`
  }
})

const dragStyle2 = computed(() => {
  return {
    top: `${dragPosition2.value.y}px`,
    left: `${dragPosition2.value.x}px`,
    width: `${dragPosition2.value.width}px`,
    height: `${dragPosition2.value.height}px`,
    background: 'gray'
  }
})

function handleChange(params: DragAndScaleChangeResultType) {
  Object.assign(dragPosition.value, {
    x: params.elX,
    y: params.elY,
    width: params.elWidth,
    height: params.elHeight
  })
  console.log(params)
}

function handleChange2(params: DragAndScaleChangeResultType) {
  Object.assign(dragPosition2.value, {
    x: params.elX,
    y: params.elY,
    width: params.elWidth,
    height: params.elHeight
  })
  console.log(params)
}
</script>

style

<style lang="scss" scoped>
.drag-area {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background-color: rgb(71 121 105);

  .drag-box {
    position: absolute;
    background-color: rgb(26 24 24);

    .inner-box {
      width: 100%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      user-select: none;
    }
  }
}
</style>

如果想禁用缩放功能，只保留拖动功能，可添加样式实现

  .hv-drag-and-scale {
    --scale-area-width: 0px;
    border: none;
  }

反之，如果想只保留缩放功能，禁用拖动功能，可添加以下样式实现

  .hv-drag-and-scale {
    .hv-drag-and-scale__area-center {
      pointer-events: none;
    }
  }

配置

TIP

属性名后跟'?'表示该属性为可选属性。

属性名	说明	类型	默认值
container	容器元素	HTMLElement | Ref<HTMLElement>	—
containerRealSize?	容器现实实际宽高	object	—
containerRealSize.width	容器现实实际宽	number	—
containerRealSize.height	容器现实实际高	number	—
keepRatio?	保持宽高比配置	object	—
keepRatio.enable	是否保持宽高比	boolean	false
keepRatio?.scaleCase	缩放时使用最大改动值还是最小改动值	'min' | 'max'	'min'
limit?	限制缩放的尺寸	object	—
limit?.inContainer	限制缩放在父元素内部	boolean	true
limit?.minWidth	限制缩放的最小宽度	number	0
limit?.minHeight	限制缩放的最小高度	number	0
limit?.maxWidth	限制缩放的最大宽度	number	Infinity
limit?.maxHeight	限制缩放的最大高度	number	Infinity
disabled?	是否禁用	boolean	false

事件

事件	说明	参数类型
change	拖动或者缩放时触发	(params: DragAndScaleChangeResultType) => void
finish	拖动或者缩放结束时触发	() => void

type DragAndScaleChangeResultType {
  /** 操作类型 */
  type: 'move' | 'scale'
  /** 相比上一次change事件，横向移动的距离 */
  deltaX: number
  /** 相比上一次change事件，纵向移动的距离 */
  deltaY: number
  /** 拖动元素位于 container中的 x */
  elX: number
  /** 拖动元素位于 container中的 y */
  elY: number
  /** 拖动元素宽度 */
  elWidth: number
  /** 拖动元素高度 */
  elHeight: number
  /** 拖动元素基于containerRealSize 转换的实际x坐标 */
  realX: number
  /** 拖动元素基于containerRealSize 转换的实际y坐标 */
  realY: number
  /** 拖动元素基于containerRealSize 转换的实际宽度 */
  realWidth: number
  /** 拖动元素基于containerRealSize 转换的实际高度 */
  realHeight: number
}

插槽

名称	说明
default	默认内容