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

本文实例为大家分享了vue实现指定区域自由拖拽、打印功能的具体代码，供大家参考，具体内容如下
先看下效果图，实现指定区域内内容自由拖拽，不超出。动态设置字体颜色及字号；设置完成实现打印指定区域内容，样式不丢失。

文章图片

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

import VueDraggableResizable from 'vue-draggable-resizable'// optionally import default stylesimport '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.innerHTMLconst oldContent = document.body.innerHTMLdocument.body.innerHTML = newContentwindow.print()window.location.reload()document.body.innerHTML = oldContentreturn false},

去掉页头页尾

/** 去掉页头和页尾 */@page {size: auto; /* auto is the initial value */margin: 0mm; /* this affects the margin in the printer settings */}

整体代码如下：

/** 这里vdr的样式设置是为了当没有选中目标文字时，去掉默认的虚线框，只有选中的时候才有虚线框 */.vdr {border: none; }.handle, .active.vdr {border: 1px dashed #000; }#print {position: relative; /** 网格样式 */background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px; }/** 去掉页头和页尾 */@page {size: auto; /* auto is the initial value */margin: 0mm; /* this affects the margin in the printer settings */}

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