uniapp 自定义showToast样式

自定义一个uniapp的showToast样式

效果图

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

vue代码

._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; } } } }

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代码中在想要使用的地方使用该组件

js代码中

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