首页 > 其他分享 >vue-print-nb 打印 clickMounted 回调为何不触发

vue-print-nb 打印 clickMounted 回调为何不触发

时间:2024-07-12 17:26:52浏览次数:8  
标签:vue const log nb print clickMounted console ref

<template>
    <div>
        <div id="printMe">
            <el-table :data="tableData" style="width: 100%;">
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
                <el-table-column fixed="right" label="Operations" width="120">
                    <template #default="{row,$index}">
                        <el-button link type="primary" size="small" @click="onsucssd(row, $index)">Detail</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <button v-print="printObj">打印</button>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import print from 'vue-print-nb'
const props = defineProps({
    tableData: {
        type: Array,
    },
})
const printLoading = ref(true)
const printObj = ref({
    id: 'printMe',
    popTitle: 'good print',
    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
    beforeOpenCallback(vue) {
        printLoading.value = true
        console.log('打开之前', vue)
    },
    openCallback(vue) {
        printLoading.value = false
        console.log('执行了打印', vue)
    },
    closeCallback(vue) {
        console.log('关闭了打印工具', vue)
    },
    //
    clickMounted(vue) {
        console.log('点击确认按钮回调事件', vue)
    },
})

const emit = defineEmits(['onsucss'])
const onsucssd = (item, index) => {
    emit('onsucss', { name: item.name, id: index })
}
</script>

<style lang="scss" scoped></style>

标签:vue,const,log,nb,print,clickMounted,console,ref
From: https://blog.csdn.net/2401_83602842/article/details/140379307

相关文章

  • Vue如何识别数学公式
    效果在Vue中使用MathJax渲染中文数学公式的步骤:1.引入MathJax库在index.html文件中,首先需要引入MathJax的JavaScript文件。<scripttype="text/javascript"asyncsrc="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_C......
  • 推荐几个开源的vue表单设计器
    1、Form.ioForm.io是一个开源的纯JavaScript表单渲染器和API平台,为开发者提供了一种快速、灵活的方式来构建和管理表单驱动的应用程序。Form.io使用ES6和JavaScript实现(没有jQuery、Angular、React或任何其他框架依赖),将JSON模式渲染为webform表单,并将该表单挂接到Form.io服务......
  • 从0到1开始搭建vue2+element ui 后台管理系统
    一、前期准备(如果已搭建的可以往下看)1.安装node(node-v查询版本号)(下载地址:https://nodejs.org/en/download/)2. 安装淘宝镜像命令: npminstall-gcnpm--registry=https://registry.npmmirror.com  3.安装webpack,以全局的方式安装命令:npminstallwebpack-g4......
  • vue3前端项目结构解析(2024-07-12)
    .├──build#打包脚本相关│  ├──config#配置文件│  ├──generate#生成器│  ├──script#脚本│  └──vite#vite配置├──mock#mock文件夹├──public#公共静态资源目录├──src#主目录│  ├──api#接口......
  • vue3项目中浏览器打开本地文档或者下载本地应用的方法(2024-07-11)
    在public文件夹下面加入预览的文件【操作说明文档】。public文件夹包含了应用程序的入口HTML文件,以及其他不需要经过编译的静态文件此文件夹不会压缩并且路径不变,所以是最佳的存放文件的位置。代码:<template><n-icontitle="操作文档"style="cursor:pointer;margin-......
  • 适用于react、vue菜单格式化工具函数
    场景在一个动态菜单场景中,你向接口获取树形菜单,但最后拿到的树未能达到你的预期,这个时候就需要手写递归重新处理这颗树适用于react、vue菜单格式化工具函数包含功能1.当前路由是否存在返回按钮判断逻辑:只要存在左侧可点击的菜单都不具备返回按钮,其他则具有返回按钮2.错误......
  • 前端使用 Vue 3,后端使用 Spring Boot 构建 Hello World 程序
    前端使用Vue3,后端使用SpringBoot构建HelloWorld程序前端(Vue3)首先,创建一个Vue3项目。1.安装VueCLInpminstall-g@vue/cli2.创建Vue项目vuecreatefrontend在交互式提示中,选择默认的Vue3预设。3.修改App.vue在frontend/src目录下,修改......
  • 基于SpringBoot+Vue+数据可视化的药品商场购物系统设计和实现(源码+LW+部署讲解)
    博主介绍:✌全网粉丝50W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌技术范围:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、P......
  • 毕业设计-基于Springboot+Vue的招生管理系统的设计与实现(源码+LW+包运行)
    源码获取:https://download.csdn.net/download/u011832806/89456200基于SpringBoot+Vue的招生管理系统开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven系统演示视频:链接:https://pan.baidu.com/s/1GwKRBbuwMiZmnxkvRN9VJg?pwd=sb......
  • 毕业设计-基于Springboot+Vue的致远汽车租赁系统的设计与实现(源码+LW+包运行)
    源码获取:https://download.csdn.net/download/u011832806/89456206基于SpringBoot+Vue的致远汽车租赁系统开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven系统演示视频:链接:https://pan.baidu.com/s/1IHfaizhpMI1q750DBZ1enA?pw......