vue插件/公共方法属性

新建一个js，任意名词config；

我觉得最经常用到的 3，和4。

 

/**
 * Created by Administrator on 2018/11/7 0007.
 */
let rootUrl = 'http://XXX.xx.cn'
let key = 'Lawj1h1mUgD11GMzZX1Gv911X'
let setItem = (key, val)=> {
  window.localStorage.setItem(key, JSON.stringify(val))
}
let getItem = (key)=> {
  let item = window.localStorage.getItem(key)
  return JSON.parse(item)
}

import { Toast } from 'vant';
//import Vue from 'vue'

let config = {}
config.install = function (Vue, options) {
  Vue.use(Toast);
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {

	// 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
	bind (el, binding, vnode, oldVnode) {
	  // 逻辑...
	}

  })
  // 3. 注入组件
  Vue.mixin({
	created: function () {

	  // 逻辑...
	},
	methods: {
	  myAjax(url, data, param = {}){
		data.key = key;
		if (url.indexOf('Login') == -1) {
		  data.Token = getItem('token') || null
		  data.account = getItem('account') || null
		}
		return new Promise((resovle, reject) => {
		  const toast1 = Toast.loading({
			duration: 0,
			mask: true,
			message: '加载中...',
			mask: false,
			forbidClick: true,
		  });

		  $.ajax({
			"type": param.type || "get",
			"async": param.async || true,
			"url": rootUrl + url,
			"data": data || "",
			"success": res => {
			  toast1.clear();
			  console.log(res, "FAIL")
			  if (res.ReturnCode == 'SUCCESS') {
				resovle(res);
				return;
			  }
			  else if (res.ReturnCode == 'FAIL') {
				Toast(res.ReturnMsg);
				if (res.TokenInvalid == 0) {//token 失效
				  this.$router.push('/login')
				}
				reject(res);
			  }
			},
			"error": err => {
			  toast1.clear();
			  Toast('系统错误');
			  console.log(err, "err")
			  reject(err);
			}
		  })

		})
	  }
	}
  })

  // 4. 添加实例方法
  Vue.prototype.config = {
	setItem,
	getItem,
	color: "#398dee",

  }
  Vue.prototype.mytime=''//计时器
  Vue.prototype.toast = (msg, dn = 1000, fc = true)=> {
	//this.$toast({message:res.ReturnMsg,duration:1000,forbidClick:true});
	Toast({message: msg, duration: dn, forbidClick: fc})
  }

}
export default config

我喜欢用4Vue.mixin写公共方法，这样就可以和上下文完美结合。比如说上面的myajax方法，我在这个方法里调用了路由

 this.$router.push('/login')  如果你是用其他方法。那么就要导入路由。还有其他繁琐的步骤，而用 Vue.mixin就可以直接写了。多么简单啊；

 

使用插件

import config from './config'
Vue.use(config)

实例；

 updataOrder(id){
		let data={
		  id,
		}
		this.myAjax('/api/AlarmHandle/GetUpdateAlarmOrderStatus', data).then(res=>{
		  this.tabidx=1;
		  this.GetAlarmOrder()
		})
	  },

<div style="overflow-y: auto;" :style="{'color':config.color}"></div>