|
|
@@ -6,15 +6,17 @@
|
|
|
v-if="visible"
|
|
|
:style="{
|
|
|
bottom: center ? 'auto' : bottom + 'px',
|
|
|
- 'background-color': coverColor
|
|
|
+ 'background-color': coverColor,
|
|
|
}"
|
|
|
@click="clickCover"
|
|
|
>
|
|
|
<div
|
|
|
class="nut-toast-inner"
|
|
|
+ :class="coverClass"
|
|
|
:style="{
|
|
|
'text-align': textAlignCenter ? 'center' : 'left',
|
|
|
- 'background-color': bgColor
|
|
|
+ 'background-color': bgColor,
|
|
|
+ ...coverStyle,
|
|
|
}"
|
|
|
>
|
|
|
<span v-if="hasIcon" class="nut-toast-icon-wrapper">
|
|
|
@@ -52,8 +54,10 @@ export default {
|
|
|
textTimer: null,
|
|
|
cover: false,
|
|
|
coverColor: 'rgba(0, 0, 0, 0)',
|
|
|
+ coverStyle: {},
|
|
|
+ coverClass: '',
|
|
|
timeStamp: null,
|
|
|
- closeOnClickOverlay: false
|
|
|
+ closeOnClickOverlay: false,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -61,7 +65,7 @@ export default {
|
|
|
if (val) {
|
|
|
this.show();
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
cusIcon() {
|
|
|
@@ -75,7 +79,7 @@ export default {
|
|
|
{ 'nut-toast-cover': this.cover },
|
|
|
{ 'nut-loading': this.type == 'loading' },
|
|
|
this.customClass,
|
|
|
- 'nut-toast-' + this.size
|
|
|
+ 'nut-toast-' + this.size,
|
|
|
];
|
|
|
},
|
|
|
hasIcon() {
|
|
|
@@ -84,7 +88,7 @@ export default {
|
|
|
} else {
|
|
|
return this.cusIcon;
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
show(force) {
|
|
|
@@ -119,11 +123,11 @@ export default {
|
|
|
if (this.closeOnClickOverlay) {
|
|
|
this.hide();
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
destroyed() {
|
|
|
this.textTimer = null;
|
|
|
this.timer = null;
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|