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, // 表名對應的值
? ? ? ? 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è)置是為了當沒有選中目標文字時，去掉默認的虛線框，只有選中的時候才有虛線框 */
.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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue使用mixins實現(xiàn)壓縮圖片代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue?ElementUI級聯(lián)選擇器回顯問題解決
這篇文章主要介紹了vue?ElementUI級聯(lián)選擇器回顯問題解決，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了Vue組件實現(xiàn)卡片動畫倒計時示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本篇文章主要介紹了Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
uni-app如何設(shè)置頁面全局背景色,其實非常簡單,一句話即可,但有時候也會踩一些坑,這篇文章主要給大家介紹了關(guān)于uniapp中設(shè)置全局頁面背景色的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)面包屑導航，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了使用vue-cli編寫vue插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
循環(huán)使用v-for指令,v-for指令需要以site in sites形式的特殊語法,sites是源數(shù)據(jù)數(shù)組并且site是數(shù)組元素迭代的別名,下面這篇文章主要給大家介紹了關(guān)于Vue中v-for列表循環(huán)的相關(guān)資料,需要的朋友可以參考下2022-11-11
快速解決electron-builder打包時下載依賴慢的問題
使用 Electron-builder 打包,有時會在下載Electron、nsis、winCodeSign的過程中 Timeout 導致打包失敗,本文給大家分享快速解決electron-builder打包時下載依賴慢的問題,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了vue項目中使用多選框的實例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07