VUE-实现一个封装打印功能的插槽组件
需求H5页面提供一个发票机打印按钮我想把它封装一下变成组件父级页面只需要在组建内填充要打印的内容就可以了尚存在的问题PC端可以了,但是移动端尚未解决。移动端的Edge和Chrom浏览器能够调起打印功能页面,但是无法找到打印机。网络上的打印机手机找不到,而且也无法安装对应的驱动。可蓝牙链接的发票打印机,使用微信小程序,有的能搜索到设备,有的搜索不到设备,能搜索到设备的,无法使用,使用微...
·
需求
H5页面提供一个发票机打印按钮
我想把它封装一下变成组件
父级页面只需要在组建内填充要打印的内容就可以了
尚存在的问题
PC端可以了,但是移动端尚未解决。
移动端的Edge和Chrom浏览器能够调起打印功能页面,但是无法找到打印机。网络上的打印机手机找不到,而且也无法安装对应的驱动。
可蓝牙链接的发票打印机,使用微信小程序,有的能搜索到设备,有的搜索不到设备,能搜索到设备的,无法使用,使用微信开发者工具查看能够看到报错信息,但局限于不熟悉小程序开发,不能明细什么原因。
组件实现
主要是使用button中的v-print来实现打印功能
<template>
<div v-show="ReceiptPrinterShow">
<div class="ReceiptPrinter-mask"></div>
<div class="ReceiptPrinter-popup ReceiptPrinter-mask-enter-active">
<div id="ReceiptPrinter" class="ReceiptPrinter-printcontents">
<slot name="UpperPart"></slot>
<slot><div class="ReceiptPrinter-Dottedine"></div></slot>
<slot name="LowerPart"></slot>
</div>
<div class="ReceiptPrinter-button">
<button @click="cancel()">取消</button>
<button v-print="'#ReceiptPrinter'">打印</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ReceiptPrinter',
props: {
value: Boolean
},
data () {
return {
ReceiptPrinterShow: false
}
},
components: {
},
watch: {
value (val) {
this.ReceiptPrinterShow = val
}
},
created () {},
mounted () {},
destroyed () {
this.ReceiptPrinterShow = false
},
methods: {
cancel () {
this.ReceiptPrinterShow = false
this.$emit('cancelReceiptPrinter')
}
}
}
</script>
<style scoped lang="scss">
.ReceiptPrinter-popup{
z-index: 2;
position: absolute;
margin: 60px 55px;
padding: 15px;
background-color: #fff;
/*max-height: 450px;*/
/*min-height: 350px;*/
}
.ReceiptPrinter-printcontents{
color: #333333;
font-size: 12px;
overflow-y: scroll;
}
.ReceiptPrinter-Dottedine{
margin: 30px 0;
border-top: dotted 2px #b4b4b4;
}
.ReceiptPrinter-button{
text-align: right;
button{
font-size: 15px;
margin:0 30px 0 0;
background-color: transparent;
font-weight: 600;
}
button:last-child{
color: #f44f0f;
}
}
.ReceiptPrinter-mask{
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
tap-highlight-color: rgba(0,0,0,0);
z-index: 1;
transition: opacity 400ms;
pointer-events: none; //不能操作
}
.ReceiptPrinter-mask-leave-active, .ReceiptPrinter-mask-enter-active {
transition: opacity 300ms;
}
</style>
父级页面使用
<ReceiptPrinter v-model="ReceiptPrinterShow" v-on:cancelReceiptPrinter="cancelReceiptPrinter">
<div slot="UpperPart">
<div class="print-GoodsInfo" v-for="(print,fal) in printGoodsList">
<div>{{print.Title}}</div>
<div>*{{print.RecommendQuantity}}</div>
</div>
</div>
<div slot="LowerPart">
<div class="print-AddressInfo">
<p>收件人:{{printRecieveAdress.Name}}</p>
<p>电话:{{printRecieveAdress.Tel}}</p>
<p>地址:{{printRecieveAdress.Province + printRecieveAdress.City + printRecieveAdress.Area + printRecieveAdress.Address}}</p>
</div>
</div>
</ReceiptPrinter>
createtime:2018-12-02
更多推荐
已为社区贡献3条内容
所有评论(0)