v-drag拖拽插件使用

0zhyfs0

于 2025-01-18 12:42:01 发布

阅读量202

点赞数 4

文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/gdjychbsh/article/details/145225468

版权

插件项目文档

v-drag插件文档地址

使用场景

遇到电子盖章位置选取与保存的问题

使用代码

安装

npm install v-drag --save

main.js中导入

import drag from "v-drag"
Vue.use(drag, {
  // 全局配置
});

vue文件中使用

<template>
  <div class="page-container">
    <div class="page-btn" @click="savePosition">
      位置已选定，保存
    </div>
    <div class="page-content">
      <img :src="imgBase64" alt="" />
      <div v-drag @v-drag-end="someFunction($event)" :style="{
        'left': offsetLeft + 'px',
        'top': offsetTop + 'px',
      }" class="zhang-img">
        <img id="img-position" src="@/assets/xianbanzhang.png" alt="" />
      </div>
    </div>
  </div>
</template>

someFunction(res) {
	console.log('左偏移：' + res.target.offsetLeft)
	this.offsetLeft = res.target.offsetLeft
	console.log('上偏移：' + res.target.offsetTop)
	this.offsetTop = res.target.offsetTop
},

<style lang="scss" scoped>
  .page-content {
    position: relative;
    padding: 0px;
    overflow: hidden;
    margin: 0 auto;
    height: 100%;
  }
  .page-container {
    position: relative;
    padding: 0px;
    background-color: #f3f5f7;
    display: flex;
    justify-content: center;
  }
  .page-btn {
    background-color: #0070d2;
    color: white;
    padding: 12px 18px;
    border-radius: 20px 0px 0px 20px;
    position: fixed;
    top: 200px;
    right: 0;
    cursor: pointer;
    z-index: 9;
  }
  .zhang-img {
    display: inline-block; position: absolute; z-index: 9;
  }
</style>