preface

This article is to share a component I wrote in Vue3,

Project address: Vue3DraggableResizable

Component functions

  • Support drag and zoom, can be defined on or off

  • Custom scale handle (eight directions can be operated when scaling, which can be opened or closed separately)

  • You can limit the drag and zoom of a component to its parent node

  • You can customize various class names within the component

  • Can be combined with the built-in DraggableContainer assembly for easy reference line and automatic adsorption function.

The component supports dozens of parameters and events and can be configured in a variety of ways, as detailed in Github documentation.

Let me introduce how to use it.

The basic function

First, register the component:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
// The default styles need to be introduced
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

// You will get a global component named Vue3DraggableResizable
createApp(App).use(Vue3DraggableResizable).mount('#app')
Copy the code

Using (Vue3DraggableResizable) globally registers two components: Vue3DraggableResizable and DraggableContainer, Vue3DraggableResizable is a component for drag and zoom, and DraggableContainer can be used for reference lines and automatic adsorption.

You can use it after registering:

<template>
  <div id="app">
    <div class="parent">
      <Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    data() {
      return {
        msg: 'Hello World. Hello World. Hello World.'}}})</script>
<style lang="less" scoped>
  .parent {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 200px;
    position: relative;
    border: 1px solid # 000;
  }
</style>
Copy the code

Simple, just use it, you can put anything inside Vue3DraggableResizable.

You can also lock the ratio by passing :lockAspectRatio=”true” :

<Vue3DraggableResizable :lockAspectRatio="true">
  {{ msg }}
</Vue3DraggableResizable>
Copy the code

You can also make the component move only on the X-axis or only on the Y-axis by passing disabledX or disabledY:

<Vue3DraggableResizable :disabledX="true"> {{ msg }} </Vue3DraggableResizable>
Copy the code

The parent property controls whether a component can only be moved within its parent:

<Vue3DraggableResizable :parent="true"> {{ msg }} </Vue3DraggableResizable>
Copy the code

In addition to the few features I’ve covered, there are a lot of other features that you can go to GitHub for a full documentation if you’re interested.

I’m going to talk about guides and adsorption alignment.

Reference line, adsorption alignment

This function needs to be used with the DraggableContainer component.

<template>
  <div id="app">
    <div class="parent">
      <DraggableContainer>
        <Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
        <Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
      </DraggableContainer>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    data() {
      return {
        msg: 'Hello World. Hello World. Hello World.'}}})</script>
<style lang="less" scoped>
  .parent {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 200px;
    position: relative;
    border: 1px solid # 000;
    .vdr-container {
      background-color: # 999; }}</style>
Copy the code

On the basis of just now, it is ok to use DraggableContainer components directly. Its Vue3DraggableResizable subcomponent automatically attaches when it moves.

You can use the coll bparent attribute, which controls whether or not the parent element is automatically aligned when it is near its edge. The default is true

<template>
  <div id="app">
    <div class="parent">
      <DraggableContainer :adsorbParent="true">
        <Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
      </DraggableContainer>
    </div>
  </div>
</template>
Copy the code

You can also customize calibration lines of columns or rows by brays bcols or brays that elements will adsorb when they are near these lines,

<DraggableContainer :adsorbCols="[10, 50, 100]." :adsorbParent="false">
  <Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
</DraggableContainer>
Copy the code

You can also change the color of the guide:

<DraggableContainer :referenceLineColor="#0f0">
  <Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
</DraggableContainer>
Copy the code

Of course, you can also not show the guide:

<DraggableContainer :referenceLineVisible="false">
  <Vue3DraggableResizable> {{ msg }} </Vue3DraggableResizable>
</DraggableContainer>
Copy the code

The reference line is not displayed, but autoadsorption is still in effect.

The last

This is a project I wrote last year. Now I would like to share it with you. If you have any problems in using it, please feel free to contact me in the comments section or on GitHub.

Click “like” here, thank you ~~