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

-NG_KC-

已于 2023-05-13 03:25:44 修改

阅读量337

点赞数

CC 4.0 BY-SA版权

分类专栏： HBuilderX uniapp 文章标签：学习 uni-app

于 2023-05-13 03:23:51 首次发布

本文链接：https://blog.youkuaiyun.com/u013742125/article/details/130653061

HBuilderX 同时被 2 个专栏收录

4 篇文章

订阅专栏

uniapp

4 篇文章

订阅专栏

文章介绍了如何在Vue项目中引入并使用Toast.js文件来实现提示信息、加载提示的显示和隐藏功能。在main.js中全局引入后，可以通过Vue原型链添加方法，使得在页面和独立JS文件中都能方便调用showToast、showLoading和hideLoading方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方法：
一、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
}