uni-app实现自定义toast_uniapp toast

效果图

util.js

/**
 * @param {Object} msg 
 * 自定义显示toast
 */
export const showToast = msg => {
	const ctx = getCurrentPages(), _t = ctx[ctx.length - 1];
	if(_t) {
		_t.$vm.$refs['toast'].show({
			title: msg,
			duration: 2500
		});
	}else 
		uni.showToast({
			title: msg,
			icon: 'none',
			duration: 2500
		})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

pages.json

	"insetLoader": {
	    "config": {
	        "Toast": "<Toast ref='toast' />"
	    },
	    // 挂载的组件名
	    "label": ["Toast"],
	    // 插入的根元素的标签类型
	    "rootEle": "view"
	}
1
2
3
4
5
6
7
8
9

安装插件

npm install vue-inset-loader
1

vue.config.js

const path = require('path')

module.exports = {
	configureWebpack: {
		module: {
			rules: [{
				test: /\.vue$/,
				use: {
					loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
				},
			}]
		},
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
'
运行
运行

components/toast/index.vue

<template>
	<view v-if="showStatus" id="bn-toast-container" class="bn-toast-container" :class="parameter.verticalAlign" :style="boxStyle">
		{{ parameter.title }}
	</view>
</template>
<script>
	export default {
		name: 'Toast',
		data() {
			return {
				showStatus: false,
				toastHeight: 0,
				toastWidth: 0,
				parameter: {
					title: '',
					duration: 2500,
					verticalAlign: 'center',
					backgroundColor: '#000000a1',
					color: '#FFFFFF'
				}
			};
		},
		computed: {
			boxStyle() {
				const _t = this;
				const { backgroundColor, color } = _t.parameter;
				const verticalAlign = _t.parameter.verticalAlign;
				return verticalAlign ? 
				`left: 50%; opacity: ${(_t.toastWidth === 0 || _t.toastHeight === 0) ? 0 : 1}; background-color: ${backgroundColor}; color: ${color}; transform: translate(-${_t.toastWidth / 2}px, -${_t.toastHeight / 2}px); top: 50%`
				: `left: 50%; opacity: ${(_t.toastWidth === 0 || _t.toastHeight === 0) ? 0 : 1}; background-color: ${backgroundColor}; color: ${color}; transform: translateX(-${_t.toastWidth / 2}px)`
			}
		},
		methods: {
			async show(parameter = {}) {
				const _t = this;
				for(const k in parameter) _t.parameter[k] = parameter[k]
				_t.showStatus = true;
				// 调整居中
				await _t.$nextTick();
				const query = uni.createSelectorQuery().in(this);
				query.select('#bn-toast-container').boundingClientRect(data => {
					if (data) {
					  _t.toastHeight = data.height;
					  _t.toastWidth = data.width;
					}
				}).exec();
				setTimeout(() => {
					_t.showStatus = false;
				}, _t.parameter.duration);
			}
		}
	}
</script>
<style>
	.bn-toast-container {
		position: fixed;
		opacity: 0;
		z-index: 100000;
		display: inline-block;
		max-width: 375rpx;
		padding: 11px 20px;
		font-size: 13px;
		text-align: center;
		border-radius: 6px;
		line-height: 20px;
		margin-top: -32px;
		transition: opacity .3s;
	}

	.bn-toast-container.top {
		/* #ifdef H5 */
		top: 88px;
		/* #endif */
		/* #ifndef H5 */
		top: 44px;
		/* #endif */
	}

	.bn-toast-container.bottom {
		bottom: 50px;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

main.js

import Toast from '@/components/toast'
Vue.component("Toast", Toast);
1
2