【学习笔记】封装uniapp项目中常用的交互弹窗

​
使用方法：
一、vue页面中使用
1.首先在main.js中引入Toast.js文件 import ‘xxxx/Toast.js’;（xxxx为Toast.js所在目录路径）
2.页面中使用 this.kc.xxxx(); 触发（xxxx为showToast、showLoading、hideLoading）

二、js文件中使用
1.首先在需要弹窗的js文件中引入Toast.js文件 import kc from ‘xxxx/Toast.js’;（xxxx为Toast.js所在目录路径）
2.在需要使用的地方使用 kc.xxxx(); 触发（xxxx为showToast、showLoading、hideLoading）

显示效果

Toast.js文件

import Vue from "vue"

// 延时弹窗，默认3000ms(3秒)关闭
const showToast = (options, delayed = 3000) => {
	if (typeof options === 'string') {
		unishowToast('none', options, delayed);
	} else if (typeof options === 'object') {
		unishowToast(options.icon, options.title, delayed);
	}

	function unishowToast(icon, title, duration) {
		uni.showToast({
			icon,
			title,
			duration
		});
	}
}

// 开启加载弹窗
const showLoading = (title) => {
	uni.showLoading({
		title
	})
}
// 关闭加载弹窗
const hideLoading = () => {
	uni.hideLoading();
}

export default {
	showToast,
	showLoading,
	hideLoading
}

Vue.prototype.kc = {
	showToast,
	showLoading,
	hideLoading
}