/*
|
* @Author: hzq
|
* @Date: 2018-08-07 09:23:43
|
* @Last Modified by: hzq
|
* @Last Modified time: 2018-08-13 16:11:17
|
* @文件说明:非文字提示组件-成功、失败、网络异常
|
* @使用方式：this.$toast({
|
type: 'success||fail||network',
|
text: '冻结成功'
|
});
|
*/
|
<template>
|
<div class="f-toast">
|
<div v-if="toastType">
|
<toast :value="true" position="middle" :is-show-mask="true" :time="1000" @on-hide="onHide">
|
<div slot="default" class="slot">
|
<i class="iconfont" :class="iconClass"></i>
|
<div>{{toastText}}</div>
|
</div>
|
</toast>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {Toast} from 'vux';
|
export default {
|
name: 'f-toast',
|
components: {Toast},
|
computed: {
|
iconClass() {
|
// 计算iconfont
|
if (this.$store.state.toastType === 'success')
|
return 'scene_Staging-chenggong';
|
else if (this.$store.state.toastType === 'fail')
|
return 'scene_Staging-shibai';
|
else if (this.$store.state.toastType === 'network')
|
return 'scene_Staging-wangluoyichang';
|
},
|
toastType() {
|
return this.$store.state.toastType;
|
},
|
toastText() {
|
return this.$store.state.toastText;
|
}
|
},
|
methods: {
|
onHide() {
|
this.$toast({type: '', tetx: ''});
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.f-toast {
|
& /deep/ .weui-toast {
|
width: 84px;
|
height: 84px;
|
min-height: 84px;
|
.weui-icon_toast {
|
display: none;
|
}
|
.weui-toast__content {
|
height: 84px;
|
min-height: 84px;
|
margin: 0;
|
font-size: @font-size-small;
|
.slot {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
height: 84px;
|
min-height: 84px;
|
.iconfont {
|
font-size: 28px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
