快捷導(dǎo)航

vue實現(xiàn)指定區(qū)域自由拖拽、打印功能

更新時間：2022年04月07日 08:31:29 作者：Rulyc

這篇文章主要為大家詳細介紹了vue實現(xiàn)指定區(qū)域自由拖拽、打印功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)指定區(qū)域自由拖拽、打印功能的具體代碼，供大家參考，具體內(nèi)容如下

先看下效果圖，實現(xiàn)指定區(qū)域內(nèi)內(nèi)容自由拖拽，不超出。動態(tài)設(shè)置字體顏色及字號；設(shè)置完成實現(xiàn)打印指定區(qū)域內(nèi)容，樣式不丟失。

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、實現(xiàn)指定區(qū)域內(nèi)自由拖拽代碼：

<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” 是為了設(shè)置父元素，且拖拽區(qū)域不能超過父元素。

x與y采用隨機數(shù)，是為了初次進入，不會多個數(shù)據(jù)不會擠在左上角。

3、打印指定區(qū)域內(nèi)內(nèi)容

?/** 打印方法 */
? ? 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>
? ? <el-button @click="doPrint">打印</el-button>
? ? <el-form ref="form" :model="form" label-width="80px">
? ? ? <el-form-item label="字號設(shè)置">
? ? ? ? <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="行高設(shè)置" 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-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>
? </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: [], // 字體號數(shù)組
? ? ? apiArr: [ // 后期從接口中獲取name集合
? ? ? ? { name: '公司名稱' },
? ? ? ? { name: '抬頭' },
? ? ? ? { name: '公司簡介' }
? ? ? ],
? ? ? list: [] // apiArr帶上所有屬性的集合
? ? }
? },
? mounted() {
? ? // 字號數(shù)組獲取
? ? for (let i = 12; i <= 48; i++) {
? ? ? this.sizeList.push({ label: `${i}px`, value: `${i}px` })
? ? }
? ? // 網(wǎng)格上的數(shù)據(jù)獲取
? ? for (const it of this.apiArr) {
? ? ? this.list.push({
? ? ? ? name: it.name, // 表名對應(yīng)的值
? ? ? ? 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.innerHTML
? ? ? const oldContent = document.body.innerHTML
? ? ? document.body.innerHTML = newContent
? ? ? window.print()
? ? ? window.location.reload()
? ? ? document.body.innerHTML = oldContent
? ? ? return false
? ? },
? ? onResize: function(x, y, width, height) {
? ? ? this.x = x
? ? ? this.y = y
? ? ? this.width = width
? ? ? this.height = height
? ? },
? ? onDrag: function(x, y) {
? ? ? this.x = x
? ? ? this.y = y
? ? },
? ? /** 選擇列下拉框 */
? ? changeName() {
? ? ? this.form.fontSize = ''
? ? ? this.form.color = ''
? ? },
? ? changeHeight() {
? ? ? this.form.fontSize = ''
? ? },
? ? /** 下拉框改變的時候進行動態(tài)設(shè)置樣式 */
? ? 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') }
? ? },
? ? /** 公共的設(shè)置樣式方法 */
? ? 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的樣式設(shè)置是為了當(dāng)沒有選中目標(biāo)文字時，去掉默認的虛線框，只有選中的時候才有虛線框 */
.vdr {
? border: none;
}
.handle, .active.vdr {
? border: 1px dashed #000;
}
#print {
? position: relative;
? /** 網(wǎng)格樣式 */
? 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: