components/snackbar.vue
<template>
<v-snackbar v-model="open" :bottom="bottom" :color="color" :timeout="2000">{{ msg }}</v-snackbar>
</template>
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Snackbar extends Vue {
color: any = "";
open: boolean = false;
msg: any = "";
bottom: boolean = true;
info(msg: any) {
this.color = "rgb(33,150,243)";
this.msg = msg;
this.open = true;
}
success(msg: any) {
this.color = "rgb(76,175,80)";
this.msg = msg;
this.open = true;
}
warning(msg: any) {
this.color = "rgb(255, 170, 0)";
this.msg = msg;
this.open = true;
}
error(msg: any) {
this.color = "rgb(255,82,82)";
this.msg = msg;
this.open = true;
}
}
</script>
utils/snackbar.ts
import Vuetify from 'vuetify';
import Vue from 'vue';
import Snackbar from '@/components/snackbar.vue';
Vue.use(Vuetify)
const v = new Vue({
render(createElement) {
return createElement(Snackbar);
},
vuetify: new Vuetify(),
})
v.$mount()
document.body.appendChild(v.$el);
const snackbar: any = v.$children[0];
function info(msg: any) {
snackbar.info(msg);
}
function error(msg: any) {
snackbar.error(msg);
}
function warning(msg: any) {
snackbar.warning(msg);
}
function success(msg: any) {
snackbar.success(msg);
}
export default {
info,
success,
warning,
error
}
main.ts
import snackbar from '@/utils/snackbar';
Vue.prototype.$snackbar = snackbar;
usage
this.$snackbar.success('this is a success msg');
this.$snackbar.error('this is a error msg');
this.$snackbar.warning('this is a warning msg');
this.$snackbar.info('this is a info msg');
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有