vue中vue-print-nb的使用
(1)安装方法:
Vue2 Version: npm install vue-print-nb --save
Vue3 Version: npm install vue3-print-nb --save
(2)使用方法(默认):
<div id="printMe" style="background:red;">
<p>葫芦娃,葫芦娃</p>
</div>
<button v-print="'#printMe'">打印</button>
(3)使用方法(配置一些参数):
<button v-print="printObj">打印</button>
<div id="printMe" style="background:red;">
<p>葫芦娃,葫芦娃</p>
</div>
export default {
data() {
return {
printObj: {
id: "printMe",
popTitle: 'good print',
extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
beforeOpenCallback (vue) {
console.log('打开之前')
},
openCallback (vue) {
console.log('执行了打印')
},
closeCallback (vue) {
console.log('关闭了打印工具')
}
}
};
}
}
(4)配置修改css样式(亲测有效)
注意:
具体请参考网站:https://www.npmjs.com/package/vue-print-nb?activeTab=readme