css vuejsで通知をフロートして右揃えにする方法

Question

基本的な通知コンポーネントを構築していますが、正しく配置するのは苦労しています。ここに私のhtmlです：

<div class="notifications"> 
    <p>{{ notification.message }}</p> 
</div> 

そして、ここで私のnotificationsクラスです。このバージョンでは

.notifications { 
    position: relative; 
    right: 10px; 
    top: 10px; 
    width: 100px; 
    z-index: 1; 
    color: black; 
    padding: 5px 5px 5px 5px; 
    background-color: red; 
    border-radius: 5px; 
    margin-bottom: 5px; 
} 

、通知が画面ここhttps://jsfiddle.net/fb343fh6/

の左下に表示されることは私の他の試みです：

.notifications { 
    position: fixed; 
    right: 10px; 
    top: 10px; 
    width: 100px; 
    z-index: 1; 
    color: black; 
    padding: 5px 5px 5px 5px; 
    background-color: red; 
    border-radius: 5px; 
    margin-bottom: 5px; 
    } 

このバージョンでは、通知Sは、画面の右上に正しく表示されますが、一つだけの通知はhttps://jsfiddle.net/762gg0bm/

注表示されます - 私は私のフロントエンドフレームワーク

としてvue.jsを使用しています誰かが助けることができますか？前もって感謝します！

Answer 1

あなたの通知は、スタイル内で同じ位置に設定されているので、重複しています。 vue.jsを使用すると、その位置を動的に変更できます。例を挙げれば、のdivにleftスタイルを追加し、その位置をランダムに割り当てました。あなたはデモhereを見ることができます。

JS：

methods: { 
    addNotification() { 
     this.notifications.push({ message: 'Some error message...', leftPos: Math.random() * 500 }) 
     this.notification_count += 1 
    } 
    } 

HTML：

<template id="notification"> 
    <div class="notifications" :style="{left: notification.leftPos + 'px'}"> 
    <p>{{ notification.message }}</p> 
    </div> 
</template>