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项目引入pinia报错的简单解决

    vue3项目引入pinia报错的简单解决

    这篇文章主要介绍了vue3项目引入pinia报错的简单解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 一文搞懂vue编译器(DSL)原理

    一文搞懂vue编译器(DSL)原理

    本文主要介绍了一文搞懂vue编译器(DSL)原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue-lazyload图片延迟加载插件的实例讲解

    vue-lazyload图片延迟加载插件的实例讲解

    下面小编就为大家分享一篇vue-lazyload图片延迟加载插件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue3中组件事件和defineEmits示例代码

    vue3中组件事件和defineEmits示例代码

    这篇文章主要给大家介绍了关于vue3中组件事件和defineEmits的相关资料,组件事件是Vue组件之间进行通信的一种方式,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • vue 开发企业微信整合案例分析

    vue 开发企业微信整合案例分析

    这篇文章主要介绍了vue 开发企业微信整合,结合具体案例形式分析了vue.js使用企业微信JSSDK实现手机端程序可以和企业微信进行整合功能的相关操作技巧,需要的朋友可以参考下
    2019-12-12
  • vue src动态加载请求获取图片的方法

    vue src动态加载请求获取图片的方法

    这篇文章主要为大家详细介绍了vue src动态加载请求获取图片的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 基于Vue实现树形穿梭框的示例代码

    基于Vue实现树形穿梭框的示例代码

    这篇文章主要为大家介绍了如何利用Vue实现一个树形穿梭框,elementUI和ant-d组件库的穿梭框组件效果都不是很好,所以本文将利用一个新的插件来实现,需要的可以参考一下
    2022-04-04
  • Vue-cli 使用json server在本地模拟请求数据的示例代码

    Vue-cli 使用json server在本地模拟请求数据的示例代码

    本篇文章主要介绍了Vue-cli 使用json server在本地模拟请求数据的示例代码,非常具有实用价值,需要的朋友可以参考下
    2017-11-11
  • 浅谈Vue.js 中的 v-on 事件指令的使用

    浅谈Vue.js 中的 v-on 事件指令的使用

    这篇文章主要介绍了浅谈Vue.js 中的 v-on 事件指令的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue2 element 弹出框拖拽会出现一层阴影问题解决方法

    vue2 element 弹出框拖拽会出现一层阴影问题解决方法

    这篇文章主要介绍了vue2 element 弹出框拖拽会出现一层阴影问题解决方法,因增加 draggable 属性导致我弹窗表单清空文本框时,从右向左选中字体会出现拖拽阴影效果,本文给大家介绍vue2 element 弹出框拖拽会出现一层阴影问题解决方法,感兴趣的朋友一起看看吧
    2024-01-01

最新评论