Vue定义公用方法

在src目录下新建common公用方法文件夹用于存放公用方法列表
common下新建common.js
该示例定义存、取、删cookie方法

main.js中引入该文件,并将其添加到Vue原型链上

import common from './common/common'


Vue.prototype.$common = common  //其中$common就是调用时所使用的方法

紧接着定义common.js中的方法,录入即用

   export default { //公开
    /**
     * 设置cookie
     **/
    setCookie(name, value, day) {
        let date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = name + '=' + value + ';expires=' + date;
    },

    /**
     * 获取cookie
     **/
    getCookie(name){
        let reg = RegExp(name + '=([^;]+)');
        let arr = document.cookie.match(reg);
        if (arr) {
            return arr[1];
        } else {
            return '';
        }
    },

    /**
     * 删除cookie
     **/
    delCookie(name) {
        setCookie(name, null, -1);
    }
}

使用:

在需求页面打印 this.$common
打印结果是这样的就说明方法添加成功了,如果想要添加其他的方法也可以通过这样的形式在原型链上新增方法
在这里插入图片描述
要使用则是:

this.$common.setCookie('cookieName',存入字符串,天数) //存cookie

this.$common.getCookie('cookieName') //取

this.$common.delCookie('cookieName') //删除

更新:
若是想将其直接定义为全局,且在this指向下,可以这样做:
首先依旧是定义你想要作为公用的方法

/**
 * 设置cookie
 **/
function setCookie(name, value, day) {
  let date = new Date();
  date.setDate(date.getDate() + day);
  document.cookie = name + '=' + value + ';expires=' + date;
};

/**
 * 获取cookie
 **/
function getCookie(name) {
  let reg = RegExp(name + '=([^;]+)');
  let arr = document.cookie.match(reg);
  if (arr) {
    return arr[1];
  } else {
    return '';
  }
};

/**
 * 删除cookie
 **/
function delCookie(name) {
  setCookie(name, null, -1);
};

然后:
将方法注册,并添加到Vue的原型链

export default {
  install(Vue,opeions){
    Vue.prototype.getCookie = getCookie;
    Vue.prototype.setCookie = setCookie;
    Vue.prototype.delCookie = delCookie;
  }
};

注:注册之后需要在main.js引入并use才能生效

import commonApi from './util/common' //你的公用方法文件路径
Vue.use(commonApi) 

over

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值