步骤一:下载安装插件

npm install vue-print-nb --save

步骤二:main.js中引入组件

import Print from 'vue-print-nb'
	Vue.user(Print)

步骤三:HTML部分

 <li  v-for="(item,index) of  qrCodeList" :key="index" style="margin: 0 auto"   >
           <div :id="item.desc">
             <div>
               <span v-if="teamQrcode==='room'" style="text-align: left;display: inline-block;width: 70px;">房间号:</span>
               <span v-else-if="teamQrcode==='guest'" style="text-align: left;display: inline-block;width: 70px;">宾客姓名:</span>
               <span style="text-align: center">{{item.info}}</span>
             </div>
             <div v-if="teamQrcode==='room'" style="margin-top: 10px">
               <span style="text-align: left">是否已住:</span>
               <span v-if="item.is_check_in===0" style="color: #F56C6C;text-align: center" >否</span>
               <span v-else style="color: #67C23A;text-align: center" >是</span>
             </div>
             <div :id="item.id" :ref="item.id" style="display: inline-block;margin: 10px auto;"></div>
           </div>

           <div>
             <el-button type="primary" plain   v-print="'#'+item.desc"  size="small"  >打印</el-button>
           </div>

         </li>

上述代码是为了实现一个页面展示多个二维码,并且每一个二维码都有一个打印,效果如下
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐