封装vuetify的snackbar组件，使其可以用this.$snackbar方式调用

首页创建一个文件夹包括一个vue文件和js文件。

vue文件为你需要的组件，如下：

在js文件中引用刚刚的Snackbar 组件及vue

import Snackbar from './Snackbar.vue'

import Vue from 'vue'

 

 创建模板并挂载

const v = new Vue({

render(createElement) {

return createElement(Snackbar);

}

})

v.$mount()

document.body.appendChild(v.$el);

 

 然后是你需要调用的方法,并暴露出去

const snackbar = v.$children[0];

function info(mes) {
  snackbar.info(mes);
}

function error(mes) {
  snackbar.error(mes);
}

function warning(mes) {
  snackbar.warning(mes);
}

function success(mes) {
  snackbar.success(mes);
}
export default {
  info,
  success,
  warning,
  error
}

 

最后在main.js文件引入

 

import snackbar from './components/snackbar/'

Vue.prototype.$snackbar = snackbar;

 

参考：vue组件挂载到全局方法的示例代码