Vue中自定義日志打印插件問題
更新時間:2023年05月20日 16:20:43 作者:codser
這篇文章主要介紹了Vue中自定義日志打印插件問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
vue自定義日志打印插件
自定義日志管理,打包部署中不會顯示打印的日志
在src目錄下創(chuàng)建log目錄,在log目錄下創(chuàng)建index.js其內容如下:
import Vue from 'vue'; // 獲取當前的環(huán)境 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類的方法放到這個對象里面執(zhí)行 //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>
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue-cli 使用json server在本地模擬請求數據的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請求數據的示例代碼,非常具有實用價值,需要的朋友可以參考下2017-11-11vue2 element 彈出框拖拽會出現一層陰影問題解決方法
這篇文章主要介紹了vue2 element 彈出框拖拽會出現一層陰影問題解決方法,因增加 draggable 屬性導致我彈窗表單清空文本框時,從右向左選中字體會出現拖拽陰影效果,本文給大家介紹vue2 element 彈出框拖拽會出現一層陰影問題解決方法,感興趣的朋友一起看看吧2024-01-01