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>

 

### 创建和使用 Vue 公共方法 在 UniApp 中创建和使用 Vue 公共方法可以通过多种方式实现,其中一种常见的方式是利用 Vue.js 提供的 `mixin` 功能[^1]。 #### 利用 Mixin 实现公共方法 通过定义一个全局混入 (global mixin),可以在所有组件实例中访问到特定的方法或属性。下面是一个简单的例子: ```javascript // main.js 或其他入口文件 import { createApp } from 'vue'; import App from './App.vue'; const myMixin = { methods: { commonMethod() { console.log('这是一个通用方法'); } } }; createApp(App).mixin(myMixin).mount('#app'); ``` 这样做的好处在于任何地方都可以直接调用 `this.commonMethod()` 而无需重复声明相同逻辑的函数。 对于更复杂的场景或者为了更好的模块化设计,则建议采用插件形式注册全局功能。这种方式不仅限于方法还包括指令、过滤器等扩展能力[^5]。 #### 插件模式下的全局方法注入 如果希望以更加结构化的形式引入公共资源和服务,那么构建自定义插件可能是更好的选择。这涉及到编写一个遵循一定规范的对象,并将其传递给应用实例的 `.use()` 方法。 ```javascript // plugins/globalMethodsPlugin.js export default { install(app, options) { app.config.globalProperties.$myGlobalFunc = function () { alert('来自全局插件的功能'); }; } } // main.ts or main.js import GlobalMethodsPlugin from '@/plugins/globalMethodsPlugin' const app = createApp(App); app.use(GlobalMethodsPlugin); // 注册插件 app.mount('#app'); ``` 上述代码片段展示了怎样封装并暴露 `$myGlobalFunc` 函数作为应用程序级别的工具集的一部分。 值得注意的是,在实际项目里应当谨慎考虑性能影响以及潜在命名冲突的风险,合理规划共享资源的作用域与生命周期管理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值