Vue中自定義日志打印插件問題
vue自定義日志打印插件
自定義日志管理,打包部署中不會顯示打印的日志
在src目錄下創(chuàng)建log目錄,在log目錄下創(chuàng)建index.js其內(nèi)容如下:
![]()
import Vue from 'vue';
// 獲取當(dāng)前的環(huán)境
const CURRENTENV = process.env.NODE_ENV;
// 對象轉(zhuǎn)換為數(shù)組
function convertToArray(nodes) {
let arr = null;
//兼容ie
try {
arr = Array.prototype.slice.call(nodes, 0);
//因?yàn)?slice是 array類的方法
//而傳進(jìn)來的參數(shù)是一個 DOM對象的數(shù)組
//所以通過call 方法把 array類的方法放到這個對象里面執(zhí)行
//call 的第二個參數(shù)是表示向被調(diào)用的方法傳進(jìn)參數(shù)
//這里的0 表示從index為0的地方開始
} catch (ex) {
// 出現(xiàn)異常就用最常見的方法處理
arr = new Array();
for (let i = 0; i < nodes.length; i++) {
arr.push(nodes[i]);
}
}
return arr;
}
/**
* 通用日志打印
* @param {要打印的日志內(nèi)容} args
* @param {日志標(biāo)識,默認(rèn)為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) => {
// 特別注意:此處不能用箭頭函數(shù),否則函數(shù)內(nèi)部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');
}
}
})
// 導(dǎo)出第二種使用方式
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() // 參數(shù)同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
插件官網(wǎng)地址https://www.npmjs.com/package/vue-print-nb
1.npm 導(dǎo)入插件
npm install vue-print-nb --save
2.main.js中引用
import Print from 'vue-print-nb' Vue.use(Print);?
3.頁面上使用有2種方式
<div id="printInfo">打印的內(nèi)容</div
<el-button size="small" type="primary" v-print="printInfoObj">打印</el-button> ? ??
printInfoObj:{
?? ??? ?id:"printInfo",
?? ??? ?popTitle:"個人檔案",
},<div id="printInfo">打印的內(nèi)容</div <button v-print="'#printMer'">打印</button>
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3項(xiàng)目引入pinia報(bào)錯的簡單解決
這篇文章主要介紹了vue3項(xiàng)目引入pinia報(bào)錯的簡單解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-lazyload圖片延遲加載插件的實(shí)例講解
下面小編就為大家分享一篇vue-lazyload圖片延遲加載插件的實(shí)例講解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue-cli 使用json server在本地模擬請求數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請求數(shù)據(jù)的示例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-11-11
vue2 element 彈出框拖拽會出現(xiàn)一層陰影問題解決方法
這篇文章主要介紹了vue2 element 彈出框拖拽會出現(xiàn)一層陰影問題解決方法,因增加 draggable 屬性導(dǎo)致我彈窗表單清空文本框時,從右向左選中字體會出現(xiàn)拖拽陰影效果,本文給大家介紹vue2 element 彈出框拖拽會出現(xiàn)一層陰影問題解決方法,感興趣的朋友一起看看吧2024-01-01

