问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue JS 警告框

社区维基
1
新手上路，请多包涵

我是 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 函数。

我做错了什么？我想做的事情的最佳实践是什么？

任何帮助表示赞赏。

原文由 Ali Farhoudi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryvue.jsvuejs2vue-component
阅读 585
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这就是我最终所做的：

我在我的 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);
    });
},

原文由 Ali Farhoudi 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

我现在用 Vuejs 2.* 设计了一个 简单 的弹出窗口，效果很好。

在此示例中，弹出窗口作为本地组件包含在内。这将是要遵循的 最佳实践 之一。让我知道这是否有帮助。

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>

弹窗.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>

原文由 divine 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题