实现指定区域自由拖拽、打印功能的攻略如下：
准备
- 安装Vue和Vue-draggable插件
npm install vue vue-draggable
自由拖拽
- 在Vue的template中，使用vue-draggable插件的
vuedraggable组件定义拖拽区域。
<template>
<div>
<h1>可拖拽项目列表</h1>
<vuedraggable v-model="list">
<div v-for="(item, index) in list" :key="index">
{{ item.name }}
</div>
</vuedraggable>
</div>
</template>
- 在Vue的script中，定义拖拽区域的数据，并在mounted钩子函数中绑定事件。
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
data() {
return {
list: [
{ name: '项目1' },
{ name: '项目2' },
{ name: '项目3' },
]
};
},
mounted() {
this.$nextTick(() => {
const draggableElement = document.querySelector(".drag-container");
const draggable = new Draggable.Sortable(draggableElement, {
draggable: ".draggable-item",
handle: ".draggable-handle",
});
});
},
};
</script>
对于绑定的事件，可以采用Draggable.js进行拖拽处理，此处为初始化时进行绑定。
打印功能
- 在Vue的template中，使用原生HTML定义打印区域。
<template>
<div>
<h1>打印区域</h1>
<div ref="printableContent">
<p v-for="(item, index) in list" :key="index">{{ item.name }}</p>
</div>
<button @click="print">打印</button>
</div>
</template>
- 在Vue的script中，定义需要打印的数据，并使用window.print()进行打印。
<script>
export default {
data() {
return {
list: [
{ name: '项目1' },
{ name: '项目2' },
{ name: '项目3' },
]
};
},
methods: {
print() {
const printableContent = this.$refs.printableContent;
const content = printableContent.innerHTML;
const popup = window.open("", "_blank", "width=600,height=600");
popup.document.open();
popup.document.write(`
<html>
<head>
<title>打印</title>
</head>
<body>
${content}
</body>
</html>
`);
popup.document.close();
popup.focus();
popup.print();
popup.close();
},
},
};
</script>
以上就是实现指定区域自由拖拽、打印功能的攻略，示例代码详见以下链接：
- 自由拖拽：https://github.com/SortableJS/Vue.Draggable
- 打印功能：https://codesandbox.io/s/vue-printing-example-gs69v
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现指定区域自由拖拽、打印功能 - Python技术站
微信扫一扫 
支付宝扫一扫 