Question

我是VueJS的新手我用jquery写了一个警告框。现在我试图在VueJS中提供它。
这就是我所做的：

1-创建名为 NovinAlert.vue 的组件，包括：

<template>
    <div id="novin-alert-container">
        <div v-for="message in messages" class="alert novin-alert" :class="message.class">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            {{ message.body }}
        </div>
    </div>
</template>
<script>
    export default {
        data: function () {
            return {
                messages: [],
            }
        },
        methods: {
            novinAlert: function (message) {
                let app = this;
                message.type = typeof message.type !== 'undefined' ? message.type : 'info';
                message.class = 'alert' + message.type;
                let index = app.messages.push(message) - 1;
                if (typeof message.duration !== 'undefined') {
                    window.setTimeout(function () {
                        app.messages.splice(index, 1);
                    }, message.duration * 1000);
                }
            }
        }
    }
</script>

2-我的示例组件是 Dashboard.vue

<template>
    ...
</template>
<script>
    export default {
        mounted() {
            novinAlert('test');
        }
    }
</script>

3-我的主要布局是：

<body>
    <div id="app">
        <novin-alert></novin-alert>
        <router-view></router-view>
    </div>
</body>

4-这是我的 app.js ：

require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
window.Vue.use(VueRouter);
import Dashboard from './components/Dashboard.vue';
const routes = [
    {path: '/', component: Dashboard, name: 'dashboard'},
];
import NovinAlert from './components/utils/NovinAlert.vue';
Vue.component('novin-alert', NovinAlert);
const router = new VueRouter({ routes: routes });
const app = new Vue({
    router,
    el: '#app'
});

当我运行信息中心页面时，它不知道novinAlert功能我做错了什么？对于我想要做的事情，最佳做法是什么？任何帮助表示赞赏。

Answer 1

我现在用Vuejs 2. *设计了一个 SIMPLE 弹出窗口，效果很好。
在此示例中，弹出窗口包含在本地组件中。这将是要遵循的最佳做法之一。如果这有帮助，请告诉我。

<强> App.vue

<template>
  <div>
    <div>Main page</div>
    <button @click="openpopup">Open popup</button>
    <popup :popupData="popupData" ></popup>
  </div>
</template>
<script>
  import Popup from'./Popup.vue';
  export default {
    components:{
      "popup" : Popup
    },
    data() {
      return {
        popupData : {
          "header" : "My popup",
          "body" : "hello world",
          "footer" : "divine inc.",
          "display" : "none"
        }
      }
    },
    methods : {
      openpopup(){
        this.popupData.display = "block";
      }
    },
    mounted(){
      this.popupData.display = "block";
    }
  }
</script>

<强> Popup.vue

<template>
  <div id="popup" :style="{display : popupData.display}">
      <div class="inner">
        <div class="header">
            <div>{{popupData.header}}</div>
            <div @click="closeFunction">Close</div>
        </div>
        <div class="body">{{popupData.body}}</div>
        <div class="footer">{{popupData.footer}}</div>
      </div>
  </div>
</template>
<script>
export default {
    props : ["popupData"],
    methods : {
        closeFunction(){
            this.popupData.display = "none";
        }
    }
}
</script>

<style>
html,body{
    padding: 0;
    margin:0;
}
#popup{
    position: absolute;
    width: 100%;
    height :100%;
    top: 0;
}
#popup .inner{
    background-color: green;
    position: inherit;
    top: 10%;
    left: 39%;
    width: 300px;
}
#popup .inner div{
    text-align: left;
}
#popup .inner .header{
    display: flex;
    justify-content: space-between;
}
</style>

Answer 2

您无法从另一个方法访问一个组件的方法。您需要将novinAlert函数移动到Dashboard组件，并将消息作为属性传递给NovinAlert组件：

NovinAlert.vue

<template>
    <div id="novin-alert-container">
        <div v-for="message in messages" class="alert novin-alert" :class="message.class">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            {{ message.body }}
        </div>
    </div>
</template>
<script>
    export default {
       props: ['messages']
    }

</script>

<强> Dashboard.vue

<template>
    <!-- pass the messages prop to the component -->
    <novin-alert :messages="messages"></novin-alert>
</template>
<script>
    export default {
        mounted() {
            this.novinAlert('test');
        },
 data() {
    return {
        messages: []
    }
 },
 methods: {
            novinAlert: function (message) {
                let app = this;
                message.type = typeof message.type !== 'undefined' ? message.type : 'info';
                message.class = 'alert' + message.type;
                let index = app.messages.push(message) - 1;
                if (typeof message.duration !== 'undefined') {
                    window.setTimeout(function () {
                        app.messages.splice(index, 1);
                    }, message.duration * 1000);
                }
            }
        }
    }
</script>

如果你想在应用程序级别发出novin警报，你需要将该函数传递给app组件

Answer 3

这是我最后做的：
我在app.js：

中创建了一个 Vue 的实例

window.eventBus = new Vue();

我使用此活动但出于多种目的。每当我需要时，我会触发（发出）一个事件，并且监听器会执行所需的操作。

对于警告框，我发出如下事件：

window.eventBus.$emit('alert', {
    text: app.trans('general.error_in_reading_data'),
    type: 'danger',
    duration: 5,
});

然后我的警报组件反应如下：

mounted() {
    window.eventBus.$on('alert', (message) => {
        this.novinAlert(message);
    });
},

Vue JS警告框

3 个答案: