vue 封装console.log 小试

6 篇文章 1 订阅

最近用vue和Cordova组合写android应用,调式是经常用console.log打写log,

今天试试封装一下,便于调试

效果这样

代码如下

mian.js

import globalUtils from './utils/globalUtils'
Vue.use(globalUtils)

globalUtils.js

export default {
  install (Vue, option) {
    Vue.prototype.appAndroidApi = function (sucessCallback, functionName, args) {
      / 
      try{
        cordova.exec(sucessCallback, function (message) {
        }, 'CordovaInterface', functionName, args)
      } catch (e) {
        // console.warn(e)
      }
    }
    
    function Console() {
      let myconsole = new Object();
      myconsole.log = function (title, obj, color, bgcolor) {
        if (!color) {
          color = '#1f222d'
        }
        if (!bgcolor) {
          bgcolor = '#cccccc'
        }
        console.log('%c ------robot--log--title-----------------:' + title + ' ', 'background: ' + bgcolor + '; color: ' + color + ';padding:8px 12px;')
        if (obj) {
          console.log('%c ------robot--log--obj-------------------:', 'background: ' + bgcolor + '; color: ' + color + ';padding:8px 12px;', obj)
        }
      }
      myconsole.debug = function (title, obj, color, bgcolor) {
        if (process.env.NODE_ENV === 'development') {
          if (!color) {
            color = '#d2ff1d'
          }
          if (!bgcolor) {
            bgcolor = '#222'
          }
          console.log('%c ------robot--debug--title-----------------:' + title + ' ', 'background: ' + bgcolor + '; color: ' + color + ';padding:8px 12px;')
          if (obj) {
            console.log('%c ------robot--debug--obj-------------------:', 'background: ' + bgcolor + '; color: ' + color + ';padding:8px 12px;', obj)
          }
        }
      }
      myconsole.error = function (title, obj, color, bgcolor) {
        if (!color) {
          color = '#f3253c'
        }
        if (!bgcolor) {
          bgcolor = '#222'
        }
        console.log('%c ------robot--error--title-----------------:' + title + ' ', 'background: ' + bgcolor + '; color: ' + color + ';padding:8px 12px;')
        if (obj) {
          console.log('%c ------robot--error--obj-------------------:', 'background: ' + bgcolor + '; color: ' + color + ';padding:8px 12px;', obj)
        }
      }
      return myconsole;
    }
    // 全局log函数
    Vue.prototype.$console = new Console()
  }
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值