uview-ui toast 二次封装

开发用到uview 的toast 很常用的内容使用却很繁琐

所以做了简单封装方便使用

前后对比：

this.$refs.uToast.show({
	type: 'success',
	title: '成功主题(带图标)',
	message: "庄生晓梦迷蝴蝶",
	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
}) // 使用前用法

　　使用后

showUToast(_t.$refs.uToast, 'success', '校验通过')

　　虽然损失了一部分灵活性 不过toast本身也不需要太多灵活性弹出框就够用了

使用步骤

1. 在utils目录下 创建文件 uToast.js

export const showUToast = (that, type , message) => {
	
	let params = {
		type: 'default',
		message: "无",
		iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
	}
	
	switch(type){
		case "success":
			params.type = type
			params.iconUrl = 'https://cdn.uviewui.com/uview/demo/toast/success.png'
			params.message = message
		break
		case "error":
			params.type = type
			params.iconUrl = 'https://cdn.uviewui.com/uview/demo/toast/error.png'
			params.message = message
		break
		case "loading":
			params.type = type
			params.iconUrl = 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
			params.message = message
		break
		default:
			params.message = message
	}
	
	that.show({
		...params
	})
}

　　2. 在需要使用的页面引入

<template>
    <view>
        <u-toast ref="uToast"></u-toast>
        
    </view>
</template>

<script>
    import {
        showUToast
    } from '@/utils/uToast.js'

    export default {
        data() {
            return {
                
            }
        },
        computed: {
            
        },
        methods: {
            showToast(params) {
                showUToast(_t.$refs.uToast, 'success', "文字提示")
            }

        }
    }
</script>
<style lang="scss">
    
</style>

 3. 查看效果