前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >编写 vuetify 全局 snackbar

编写 vuetify 全局 snackbar

作者头像
4O4
发布2022-04-25 19:09:19
8880
发布2022-04-25 19:09:19
举报
文章被收录于专栏:404404

components/snackbar.vue

代码语言:javascript
复制
<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

代码语言:javascript
复制
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

代码语言:javascript
复制
import snackbar from '@/utils/snackbar';

Vue.prototype.$snackbar = snackbar;

usage

代码语言:javascript
复制
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');

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-07-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档