uview-ui toast 二次封裝

我辈年轻發表於2024-03-22
ViewUIAST封裝

開發用到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. 檢視效果

相關文章