需求

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