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

 <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-resizableparent=".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.innerHTMLconst oldContent = document.body.innerHTMLdocument.body.innerHTML = newContentwindow.print()window.location.reload()document.body.innerHTML = oldContentreturn 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><el-button @click="doPrint">打印</el-button><el-form ref="form" :model="form" label-width="80px"><el-form-item label="字号设置"><el-row :gutter="20"><el-col :span="4"><el-select v-model="form.name" @change="changeName();changeVal()"><el-option v-for="(item,index) in list" :label="item.label" :key="index+item.label" :value="item.name"></el-option></el-select></el-col><el-col :span="4"><el-select v-model="form.selectVal" @change="changeHeight"><el-option label="字体大小" value="fontSize"></el-option><el-option label="行高设置" key="index+item.value" value="lineHeight"></el-option></el-select></el-col><el-col :span="4"><el-select v-model="form.fontSize" @change="changeVal"><el-option v-for="(item,index) in sizeList" :key="index+item.value" :label="item.label" :value="item.value"></el-option></el-select></el-col><el-col :span="4"><el-color-picker v-model="form.color" @change="changeVal"></el-color-picker></el-col></el-row></el-form-item></el-form><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-resizableparent=".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></div>
</template><script>
export default {data: function() {return {width: 0,height: 0,x: 0,y: 0,form: {name: '',fontSize: '',selectVal: '',color: '',paddingTop: 20,paddingBottom: 0,paddingLeft: 0,paddingRight: 0},sizeList: [], // 字体号数组apiArr: [ // 后期从接口中获取name集合{ name: '公司名称' },{ name: '抬头' },{ name: '公司简介' }],list: [] // apiArr带上所有属性的集合}},mounted() {// 字号数组获取for (let i = 12; i <= 48; i++) {this.sizeList.push({ label: `${i}px`, value: `${i}px` })}// 网格上的数据获取for (const it of this.apiArr) {this.list.push({name: it.name, // 表名对应的值label: it.name, // 表名fontSize: '16px', // 默认字体lineHeight: 'normal', // 默认行高color: '#000000', // 默认颜色x: Math.floor(Math.random() * (800 - 10)) + 10, // x默认值y: Math.floor(Math.random() * (450 - 10)) + 10 // y 默认值})}},methods: {/** 打印方法 */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},onResize: function(x, y, width, height) {this.x = xthis.y = ythis.width = widththis.height = height},onDrag: function(x, y) {this.x = xthis.y = y},/** 选择列下拉框 */changeName() {this.form.fontSize = ''this.form.color = ''},changeHeight() {this.form.fontSize = ''},/** 下拉框改变的时候进行动态设置样式 */changeVal() {if (this.form.name && this.form.fontSize && this.form.selectVal === 'fontSize') { this.commonMethod('fontSize') }if (this.form.name && this.form.fontSize && this.form.selectVal === 'lineHeight') { this.commonMethod('lineHeight') }if (this.form.name && this.form.color) { this.commonMethod('color') }},/** 公共的设置样式方法 */commonMethod(val) {for (const it of this.list) {if (it.label === this.form.name) {if (val === 'lineHeight') {it[val] = this.form.fontSize} else {it[val] = this.form[val]}}}}}
}
</script><style scoped>
/** 这里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;
}
</style>
<style media="print" scoped>
/** 去掉页头和页尾 */
@page {size: auto;  /* auto is the initial value */margin: 0mm; /* this affects the margin in the printer settings */
}
</style>

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

Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题）
Vue 实现弹框自由拖拽(不出可视范围.解决快速拖动问题) 由于页面中弹框很多,往往会挡住想要查看的内容.从而,有了自由移动拖拽弹框的需求:但在使用的过程中发现,一开始编写的drag.js文件会移出可 ...
Qt5.14_MinGW/MSVC下实现VS2019面板自由拖拽组合功能
文章目录前言一.src源码获取二.lib_MinGW/lib_MSVC获取三.库的添加四.代码测试总结前言最近在项目中需要实现几个窗口可以自由拖拽等需求,一开始使用Qt原生控件QDoc ...
vue 组件封装——可自由拖拽移动的盒子
最终效果完整代码关键性要点,详见注释组件封装 superBox.vue <template><divref="box_Ref"class="box ...
sortable vue 排序_vue 使用 sortable 实现 el-table 拖拽排序功能
本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动
原文地址:vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动_超人不会飞啊的博客-CSDN博客_vue鼠标拖拽这边如果是动态渲染的div,需要等dom渲染结束后.id存在了.再去设置this.sc ...
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
前言这里是通过vue的指令封装好的直接创建一个js文件复制进去,引入一下就搞定了,非常简单 html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这 ...
winform窗体自由拖拽控件
源码地址:https://download.csdn.net/download/horseroll/10906640 以上链接是用积分下载的,如果没有积分,可以用以下链接付费下载:https://do ...
html列表拖拽排序插件,可对列表自由拖拽排序的jQuery插件
dragslot.js是一款可以对列表自由拖拽排序的jQuery插件.该插件主要的功能是实现了列表项可以在各个列表中相互拖拽. 对于像todo list, 分配任务列表都可以应用这个效果. 使用方法 ...

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

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

最新文章

热门文章