我是新来的。
我用jquery编写了一个警告框。现在我想在VueJS提供。
以下是我所做的：
1创建了一个名为NoValAlv.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">×</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的功能。我做错了什么？我要做的最好的做法是什么？
如有任何帮助，我们将不胜感激。
最佳答案
我现在已经用VueJS2*设计了一个简单的弹出窗口，它工作得很好。在本例中，popup作为本地组件包含。这将是最好的做法之一。如果有帮助，请告诉我。
应用程序.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>
弹出窗口.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>
关于javascript - Vue JS警报框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47988708/