使用vuex進行狀态管理,使用css控制toast的顯示。
type表示toast中的圖示,可以自定義添加多種圖示,例子中隻設定了normal與success,
通過showToast控制toast的css的fadin和fadeout類,通過css的動畫效果實作toast逐漸消失的效果
//toast.components
<template>
<div class="toast-wrapper" :class="{ 'fadein': showToast,'fadeout': !showToast}">
<div class="icon" v-if="toastInfo.type!=='normal'" :class="toastInfo.type" >
</div>
<div class="message">{{toastInfo.message}}</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: "Toast",
data() {
return {
message: "",
type: "normal" // noraml 預設,無圖示; success 有圖示
};
},
computed:{
...mapGetters(['showToast','toastInfo'])
},
};
</script>
<style scoped>
@Medium: PingFangSC-Medium, "Microsoft YaHei";
@Regular: PingFangSC-Regular, "Microsoft YaHei";
@Primary: #ff7400;
.toast-wrapper {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 7.07rem;
height: 5.21rem;
background: rgba(0, 0, 0, 0.8);
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.fadein {
opacity: 0.8;
transition: opacity ease-in 0s;
}
&.fadeout {
opacity: 0;
transition: all ease-out 0.5s;
}
.icon{
display: block;
}
.success{
width: 1.29rem;
height: 1.29rem;
margin-bottom: 0.43rem;
background: url('../assets/success.png');
background-size: 1.29rem 1.29rem;
}
.message{
font-family: @Regular;
font-size: 15px;
text-align: center;
color: #fff;
}
}
</style>
通過vuex管理toast的toastInfo,即message和time以及type
// index.js
import mutations from './mutations.js';
import actions from './actions.js';
import getters from './getters.js';
const state = {
showToast: false,
toastInfo: {
type: 'normal',
meassage: ''
}
};
export default {
state,
getters,
actions,
mutations
};
// getter.js
export default {
showToast: state => state.showToast,
toastInfo: state => state.toastInfo
};
// actions.js
export default {
setToast ({ dispatch, commit }, payload) {
commit('updateToast', true);
commit('updateToastInfo', payload);
setTimeout(() => { dispatch('delToast'); }, payload.time);
},
delToast ({ commit }) {
commit('updateToast', false);
}
};
// mutations.js
export default {
updateToast (state, params) {
state.showToast = params;
},
updateToastInfo (state, params) {
state.toastInfo = { ...params };
}
};
最後在元件裡使用, 注意,因為是通過vuex控制toasShow,然後在toasShow為false的時候,toast還有0.5s的時間逐漸隐藏,是以整體展示的時間是settoast中的time時間加0.5s
import { mapGetters, mapActions } from 'vuex';
methods: {
...mapActions([ 'setToast']),
someMedthod() {
this.setToast({time: 1500, message: '成功',type: 'success'});
}
}