wzdwc
61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<div class="toast-container">
|
|
<div class="toast-body" v-show="showValue">
|
|
{{text}}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Prop, Watch, Vue} from 'vue-property-decorator';
|
|
|
|
@Component
|
|
export default class Toast extends Vue {
|
|
@Prop() private text!: string;
|
|
@Prop({default: false, type: Boolean}) private show!: boolean;
|
|
@Prop({default: 1000, type: Number}) private timeOut!: number;
|
|
|
|
private Time: any;
|
|
|
|
get showValue() {
|
|
console.log('come in')
|
|
if (this.show) {
|
|
this.close();
|
|
}
|
|
return this.show;
|
|
}
|
|
|
|
set showValue(val) {
|
|
this.$emit('update:show', val);
|
|
}
|
|
|
|
private close() {
|
|
console.log('come in')
|
|
clearTimeout(this.Time);
|
|
this.Time = setTimeout(() => {
|
|
this.showValue = false;
|
|
this.$emit('close');
|
|
}, this.timeOut || 0);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped
|
|
lang="less">
|
|
.toast-container {
|
|
.toast-body {
|
|
padding: 2px 6px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate3d(-50%, -50%, 0);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
</style>
|