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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
解决Element中el-date-picker组件不回填的情况
这篇文章主要介绍了解决Element中el-date-picker组件不回填的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11vite+vue3搭建的工程实现批量导入store的module
这篇文章主要介绍了vite+vue3搭建的工程实现批量导入store的module方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论