uniapp开发替换showToast组件

问题

• uniapp的showToast成功回调没有在duration之后，而是直接执行。

解决方案

• 思路：依照原有的showToast，重新设计一个组件完成，并调整回调为经过duration后执行。
• 组件代码

<template>
	<div class="toast" v-show="visible">
		<i :class="iconClass"></i>
		<p class=""> {{ message }} </p>
	</div>
</template>
<script>
export default {
  props: {
  },
  data() {
	return {
	  visible: false,
	  message: '',
	  iconClass: 'uni-icon-success-no-circle'
	}
  },
  methods: {
	show(obj) {
	  if (!obj && !obj.title) {
		  return;
	  }
	  this.message = obj.title;
	  if (obj.icon) {
		  this.iconClass = obj.icon;
	  }
	  let params = {
		  duration: 1500,
		  callback: function(){},
	  }
	  this.visible = true;
	  if (obj.callback) {
		  params.callback = obj.callback;
	  }
	  if (obj.duration) {
		  params.duration = obj.duration;
	  }
	  this.message = obj.title;
	  setTimeout(() => {
		this.hide();
		params.callback();
	  }, params.duration)
	},
	hide() {
	  this.visible = false
	}
  }
}
</script>
<style>
.toast {
  position: fixed;
  z-index: 999;
  width: 8em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(17,17,17,.7);
  text-align: center;
  color: #fff;
  border-radius: 5px;
}
.toast i{
	margin: 15px 0 0;
	font-size: 55px;
}
.toast p {
	margin: 0 0 15px;
	font-size: 16px;
}
</style>

• 使用代码

<template>
	.....
	<view class="button-container">
		<button type="primary" class="button" size="mini" @click="showToastTest">提交</button>
	</view>
	.....
	<view>
		<show-toast ref="toast"></show-toast>
	</view>
</template>
<script>
	import showToast from '../../components/toast/commonToast.vue'
	export default {
		components: {
			showToast,
		},
		methods: {
			showToastTest() {
				let that = this;
				this.$refs.toast.show({
					title: '提示信息',
					duration: 1500,
					callback: function() {
						that.$refs.toast.show({
							title: 'success'
						});
					}
				});
			},
			.....
		},
		......
	}