Vue JS 알림 상자

VueJS를 처음 사용했습니다.
jquery를 사용하여 경고 상자를 작성했습니다. 지금 나는 VueJS에서 그것을 제공하려고 노력하고있다.
여기 내가 무엇을했는지 있습니다 :Vue JS 알림 상자

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 내 예를 들어, 구성 요소가

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

Dashboard.vue 입니다
3 내 메인 레이아웃 :
내가 대시 보드 페이지를 실행하면

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 기능을 모르는 : 0
<body> <div id="app"> <novin-alert></novin-alert> <router-view></router-view> </div> </body>

4- 그리고 이것은 내 app.js입니다.
내가 잘못 했나요? 그리고 내가하려고하는 것에 대한 모범 사례는 무엇입니까?
도움을 주시면 감사하겠습니다.

출처

2017-12-27 Ali Farhoudi

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>

출처

2017-12-27 09:37:09 divine

감사합니다. @divine. 모든 구성 요소에서 사용할 수 있도록 경고 구성 요소를 전역으로 설정하는 대신 사용하려는 구성 요소에서 경고 구성 요소를 가져 오는 것이 좋습니다. 이 코드를 WET (DRY가 아님)로 설정하지 않습니까? –

@AllFarhoudi 웹 사이트의 여러 시나리오에 대해 동일한 AlertPopup 기능을 다시 사용해야 할 수도 있습니다. 그리고 다른 시나리오에서는 팝업에서 다른 텍스트 메시지가 필요할 수 있으며 일부 페이지는 팝업이 필요하지 않을 수 있습니다. 이 경우, 개인적으로, 팝업 컴포넌트를 로컬 컴포넌트로 사용하는 것이 더 나은 접근 방법이 될 것입니다. – divine

컴포넌트에서''openPopUp'' 함수를 정의했습니다.그러나 나는 그것을하고 싶지 않다. 다른 컴포넌트 내부에서 메소드를 호출하려고합니다. 귀하의 코드를 시도했지만 app.vue의 탑재 된 섹션 안에 popup.vue에 정의 된 메서드를 호출 할 수 없습니다. –

당신은 서로 하나 개의 구성 요소의 방법에 액세스 할 수 없습니다. 당신이 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>

경우 앱 레벨에서 노빈 알림을 원한다면 앱 구성 요소에 함수를 전달해야합니다.

출처

2017-12-27 09:40:49 Tomer

fatman에게 감사드립니다. 나는 그것이 좋은 생각이라고 생각하지 않는다. 다른 많은 구성 요소에서이 기능이 필요하기 때문입니다. 모든 구성 요소에 복사하는 것은 좋지 않습니다. @divine과 같은 다른 구성 요소의 구성 요소를 가져 오는 것이 더 나은 솔루션이라고 생각합니다. 어떻게 생각해? –

별도의 모듈 (js 파일)에 넣고 필요한 곳에 가져 오십시오. 또는 mixin을 사용하십시오 : https://vuejs.org/v2/guide/mixins.html – Tomer

답변

관련 문제