步骤一：下载安装插件

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
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue