Vue中自定义日志打印插件问题

 更新时间:2023年05月20日 16:20:43   作者:codser  
这篇文章主要介绍了Vue中自定义日志打印插件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue自定义日志打印插件

自定义日志管理,打包部署中不会显示打印的日志

在src目录下创建log目录,在log目录下创建index.js其内容如下:

import Vue from 'vue';
// 获取当前的环境
const CURRENTENV = process.env.NODE_ENV;
// 对象转换为数组
function convertToArray(nodes) {
          let arr = null;
          //兼容ie
          try {
                    arr = Array.prototype.slice.call(nodes, 0);
                    //因为 slice是 array类的方法
                    //而传进来的参数是一个 DOM对象的数组
                    //所以通过call 方法把 array类的方法放到这个对象里面执行
                    //call 的第二个参数是表示向被调用的方法传进参数
                    //这里的0 表示从index为0的地方开始
          } catch (ex) {
                    // 出现异常就用最常见的方法处理
                    arr = new Array();
                    for (let i = 0; i < nodes.length; i++) {
                              arr.push(nodes[i]);
                    }
          }
          return arr;
}
/**
 * 通用日志打印
 * @param {要打印的日志内容} args 
 * @param {日志标识,默认为log,warn,error,dir} logTag 
 */
function commLog(args,logTag = 'log'){
          if(CURRENTENV !== 'development') return
          switch(logTag){
                    case 'log':console.log(...convertToArray(args));break;
                    case 'warn':console.warn(...convertToArray(args));break;
                    case 'error':console.error(...convertToArray(args));break;
                    case 'dir':console.dir(...convertToArray(args));break;
          }
}
Vue.use({
          install: (Vue) => {
                    // 特别注意:此处不能用箭头函数,否则函数内部arguments的作用域就变了
                    // 普通日志
                    Vue.prototype.$log = function() {
                              commLog(arguments);
                    };
                    // 警告日志
                    Vue.prototype.$warn= function () {
                              commLog(arguments,'warn');
                    }
                    // 错误日志
                    Vue.prototype.$error = function() {
                              commLog(arguments,'error');
                    }
                    // 打印对象
                    Vue.prototype.$dir = function() {
                              commLog(arguments,'dir');
                    }
          }
})
// 导出第二种使用方式
export default  {
          log:function(){
                    commLog(arguments);  
          },
          warn:function(){
                    commLog(arguments,'warn');  
          },
          error:function(){
                    commLog(arguments,'error');  
          },
          dir:function(){
                    commLog(arguments,'dir');  
          }
}

使用方式:

main.js中引入使用:

import './log'

任何.vue组件中使用

this.$log() // 参数同console.log()
this.$warn()
this.$error()
this.$dir()

js文件中使用:

import LOG from '../log'
LOG.log()   // 同console.log()
LOG.warn()
LOG.error()
LOG.dir()

vue打印插件vue-print-nb

插件官网地址https://www.npmjs.com/package/vue-print-nb

1.npm 导入插件

npm install vue-print-nb --save

2.main.js中引用

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

3.页面上使用有2种方式

<div id="printInfo">打印的内容</div
<el-button size="small" type="primary" v-print="printInfoObj">打印</el-button>     
printInfoObj:{
        id:"printInfo",
        popTitle:"个人档案",
},
<div id="printInfo">打印的内容</div
<button v-print="'#printMer'">打印</button>

总结 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3鼠标经过显示按钮功能的实现

    vue3鼠标经过显示按钮功能的实现

    本篇文章介绍了如何使用 Vue3 实现一个鼠标经过显示按钮的效果,我们使用了 Vue3 的 Composition API 来创建响应式的数据,并使用了 @mouseover 和 @mouseleave 事件来监听鼠标的移入和移出事件,感兴趣的朋友一起看看吧
    2024-04-04
  • vue动画之点击按钮往上渐渐显示出来的实例

    vue动画之点击按钮往上渐渐显示出来的实例

    今天小编就为大家分享一篇vue动画之点击按钮往上渐渐显示出来的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 解决Element中el-date-picker组件不回填的情况

    解决Element中el-date-picker组件不回填的情况

    这篇文章主要介绍了解决Element中el-date-picker组件不回填的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue实现虚拟滚动的示例详解

    vue实现虚拟滚动的示例详解

    虚拟滚动或者移动是指禁止原生滚动,之后通过监听浏览器的相关事件实现模拟滚动,下面小编就来和大家详细介绍一下vue实现虚拟滚动的示例代码,需要的可以参考下
    2023-10-10
  • Vue3 将组件手动渲染到指定元素中的方法实现

    Vue3 将组件手动渲染到指定元素中的方法实现

    本文主要介绍了Vue3 将组件手动渲染到指定元素中的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue3引入腾讯地图包含标注简易操作指南

    Vue3引入腾讯地图包含标注简易操作指南

    这篇文章主要介绍了Vue3引入腾讯地图的相关资料,并实现点击地图添加标注的功能,示例代码提供了添加单个或多个标注的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • Vue中多个元素、组件的过渡及列表过渡的方法示例

    Vue中多个元素、组件的过渡及列表过渡的方法示例

    这篇文章主要介绍了Vue中多个元素、组件的过渡及列表过渡的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • vue2.x引入threejs的实例代码

    vue2.x引入threejs的实例代码

    这篇文章主要介绍了vue2.x引入threejs,如果在开发过程中出现threejs生成的canvas出现外边框,只需要用css样式修改,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vite+vue3搭建的工程实现批量导入store的module

    vite+vue3搭建的工程实现批量导入store的module

    这篇文章主要介绍了vite+vue3搭建的工程实现批量导入store的module方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue如何根据权限生成动态路由、导航栏

    vue如何根据权限生成动态路由、导航栏

    这篇文章主要介绍了vue如何根据权限生成动态路由、导航栏,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论