vue实现指定区域自由拖拽、打印功能

最新推荐文章于 2025-10-23 01:57:43 发布

原创

最新推荐文章于 2025-10-23 01:57:43 发布 · 4.4k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #自由拖拽及打印

本文介绍如何使用Vue draggable-resizable插件在指定区域内创建可拖拽的内容，实现实时字体颜色、字号调整，以及打印功能，确保样式完整。通过实例展示了如何配置组件并实现打印前的页眉页脚去除。

先看下效果图，实现指定区域内内容自由拖拽，不超出。动态设置字体颜色及字号；设置完成实现打印指定区域内容，样式不丢失。
请添加图片描述

1、运行命令npm i vue-draggable-resizable -S，安装拖拽插件vue-draggable-resizable，并引入使用（下面引入是放入main.js文件中）

import VueDraggableResizable from 'vue-draggable-resizable'

// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

2、实现指定区域内自由拖拽代码：

 <div class="p-event" id="print" style="border: 1px solid red; box-sizing: border-box; height: 500px; width: 900px;">
        <template v-for="(item, index) in list">
          <vue-draggable-resizable
            parent=".p-event"
            :grid="[10,10]"
            :x="item.x"
            :y="item.y"
            :left="form.paddingLeft"
            :key="item+index"
            :parent="true"
            w="auto"
            h="auto"
            @dragging="onDrag"
            @resizing="onResize">
            <p :style="{ fontSize: item.fontSize, color: item.color, lineHeight: item.lineHeight }">{
  
  { item.name }}</p>
          </vue-draggable-resizable>
        </template>
      </div>

class=“p-event”， parent=".p-event"， :parent=“true” 是为了设置父元素，且拖拽区域不能超过父元素。
在这里插入图片描述
x与y采用随机数，是为了初次进入，不会多个数据不会挤在左上角。

2、打印指定区域内内容

 /** 打印方法 */
    doPrint() {
   
   
      const subOutputRankPrint = document.getElementById('print')
      const newContent = subOutputRankPrint.innerHTML
      const oldContent = document.body.innerHTML
      document.body.innerHTML = newContent
      window.print()
      window.location.reload()
      document.body.innerHTML = oldContent
      return false
    },

去掉页头页尾

<style media="print" scoped>
/** 去掉页头和页尾 */
@page {
   
   
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
</style>

整体代码如下：

<template>
  <div style="padding:30px;">
    <h1>拖拽</h1

最低0.47元/天解锁文章