VUE-实现一个封装打印功能的插槽组件

需求

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