Vue.js VueJS 2 Simplert仅涵盖组件

一个简单的描述是，基本上当我每次点击“提交”按钮时，就会弹出一个警报。所以我使用Vue来实现这一点

我目前正在做的项目是一个单页应用程序（SPA），所以这就是问题所在。该警报只覆盖我所在的组件，而不覆盖整个页面

问题：

---

有没有办法让警报覆盖整个页面？

在我看来，你至少有两个选项可以解决它：一个是脏的、快速的，另一个是稍微面向设计的

选择1 覆盖遮罩的css位置属性：

从：

位置：绝对

到：

位置：固定

选择2 全局声明Simplert组件，因为您可能会经常使用它

// somewhere in your main/app/bootsrap.js file
Vue.compoment('simplert', require('vue2-simplert'))

现在，在根组件中或在主

组件中（如果您使用的是vue路由器）：

---

希望这能有所帮助。

只需覆盖mask css类，将其设置为

position:fixed

，而不是

position:absolute

// root component
<template>
<div>
    <simplert :useRadius="true" :useIcon="true" ref="simplert"/>
    <router-view></router-view> 
</div>
</template>

<script>
export default {
   mounted () {
      this.$on('trigger:simplert', (data) => this.triggerSimplert(data)) 
   },

   methods: {
      triggerSimplert (data) {
        this.$refs.simplert.openSimplert(data)
      }
   }

}
</script>

...
someMethod () {
   let obj = {
      title: 'Custom Function',
      message: 'Click close to trigger custom function',
      type: 'info',
      onClose: this.onClose
   }

   this.$emit('trigger:simplert', obj)
}
...