uniapp 自定义showToast样式

自定义一个uniapp的showToast样式

效果图

 

在组件里新建一个文档show-toast

vue代码

<template>
	<view class="_showToast" v-show="show">
		<view class="_shade"></view>
		<view class="_ToastBox">
			<view class="Toast-box">
				<view style="height: 10px;"></view>
				<image v-if="icon=='success'" class="Toast-icon" src="@/static/images/success.png"></image>
				<text v-if="icon=='success'" class="Toast-title-success">{{title}}</text>
				<image v-if="icon=='fail'" class="Toast-icon" src="@/static/fail.png"></image>
				<text v-if="icon=='fail'" class="Toast-title-fail">{{title}}</text>
				<text class="Toast-subtitle">{{content}}</text>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		name:"show-toast",
		data() {
			return {
				
			};
		},
		computed: {
			show(){
				return this.$toastStore.state.show;
			},
			title(){
				return this.$toastStore.state.title;
			},
			content(){
				return this.$toastStore.state.content;
			},
			icon(){
				return this.$toastStore.state.icon;
			}	
		},
		mounted() {
			setTimeout(()=>{
				this.$toastStore.commit('hideToast')
				this.$toastStore.commit('success',"confirm")
			},3000)
		},
		methods:{
			closeToast(){
				this.$toastStore.commit('hideToast')
			},
			clickBtn(res){
				this.$toastStore.commit('hideToast')
				this.$toastStore.commit('success',res)
			}
		},
		beforeDestroy(){
			this.$toastStore.commit('hideToast')
		},
	}
</script>

<style lang="scss" scoped>
._showToast{
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	z-index:10000;
	._shade{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #000;
		opacity: .6;
		z-index:11000;
	}
	._ToastBox{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index:12000;
		display: flex;
		justify-content: center;
		align-items: center;
		.Toast-box{
			  position: absolute;
			  width: 238.5px;
			  min-height: 169.75px;
			  top:50%;
			  left: 50%;
			  transform: translate(-50%,-50%);
			  background: #FFFFFF;
			  box-shadow: 0px 10px 20px 0px rgba(28, 23, 47, 0.2);
			  border-radius: 14px;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  .Toast-icon{
				  width: 71px;
				  height: 71px;
				  display: block;
				  margin-top:17px;
			  }
			  .Toast-title-fail{
				  font-size: 20px;
				  font-family: Source Han Sans CN;
				  font-weight: bold;
				  color: #EC4E4E;
				  margin-top: 18px;
			  }
			  .Toast-title-success{
				  font-size: 14px;
				  font-family: Source Han Sans CN;
				  // font-weight: bold;
				  color: #40565C;
				  margin-top: 18px;
			  }
			  .Toast-subtitle{
				  font-size: 17px;
				  font-family: Source Han Sans CN;
				  font-weight: 400;
				  color: #666666;
				  margin-top: 6px;
				  padding: 0 12px 12px 12px;
			  }
		}
	}				
}	
</style>

initToast.js文件

import Vuex from 'vuex'
export default function initToast(v) {
  v.use(Vuex)
  // 挂在store到全局Vue原型上
  v.prototype.$toastStore = new Vuex.Store({
    state: {
		show:false,
		icon:"success",//success:成功；fail:失败
		title:"标题",
		content:'内容',
		success:null,
    },
    mutations: {
		hideToast(state) {
			// 小程序导航条页面控制
			// #ifndef H5
			if(state.hideTabBar){
				wx.showTabBar();
			}
			// #endif
			state.show = false
		},
		showToast(state,data) {
			state = Object.assign(state,data)
			console.log(state);
			state.show = true
			setTimeout(()=>{
				state.show = false
				return state.success(state.icon)
			},2000)
		}
    }
  })
  // 注册$showToast到Vue原型上，以方便全局调用
  v.prototype.$showToast = function (option) { 
	if (typeof option === 'object') {
		// #ifndef H5
		if(option.hideTabBar){
			wx.hideTabBar();
		}
		// #endif
		
		v.prototype.$toastStore.commit('showToast', option)
	}else{
		throw "配置项必须为对象传入的值为："+typeof option;
	}
  }
}

在main.js中引入

import initToast from "@/components/show-toast/initToast.js"
import showToast from "@/components/show-toast/show-toast.vue"

Vue.component('show-toast',showToast)

initToast(Vue);

在父组件中使用

vue代码中在想要使用的地方使用该组件

<show-toast></show-toast>

js代码中

this.$showToast({
    title:"提交成功，感谢您的反馈！",
	content:"",
	icon:'success',
	success:res=>{
		console.log("[dsdhfdhsh]")
	}
});