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

本文实例为大家分享了vue实现指定区域自由拖拽、打印功能的具体代码，供大家参考，具体内容如下

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

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、 实现指定区域内自由拖拽代码：

class=“p-event”， parent=".p-event"， :parent=“true” 是为了设置父元素，且拖拽区域不能超过父元素。

x与y采用随机数，是为了初次进入，不会多个数据不会挤在左上角。

3、打印指定区域内内容

 /** 打印方法 */
    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
    },

去掉页头页尾

整体代码如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。