Question

当我点击任何卡片时，它会显示它正在工作的流行音乐，但我需要一些模糊的背景，我正在尝试使用一些活动属性并使用切换（）；它仅反映在第一张卡片上，我需要我的背景应该是模糊的，并且在单击弹出关闭按钮时它应该被隐藏并仅显示具有正常my output 的卡片。我需要的意思是当弹出窗口打开时意味着背景应该是模糊的并且应突出显示弹出窗口，单击关闭按钮时，应隐藏弹出窗口并正常显示卡片，请帮我解决此问题

<template>
<div class="carddisplay-section">
    <div  v-for="note in notes" :key="note.data" id="blur" class="container note">
        <div @click="toggle()" class="card-content">
            <h5>{{note.title}}</h5>
            <p>{{note.body}}</p>
        </div>
        <div class="import-icons">
            <icons class="imported-icons note-icons" />
            <button v-if="flag" class="card-button" type="button" @click="handlesubmit();Togglebtn();">Close</button>
        </div>
    </div>
    <div id="popup">
        <UpdateNotes/>
    </div>
</div>
</template>

<script>
import service from '../service/User'
import icons from './icons'
import UpdateNotes from './UpdateNotes.vue'
export default {
    name: 'DisplayNotes',
    components: {
        icons,UpdateNotes
    },
    data() {
        return {
            flag: true,
            notes: [{
                id: 1,
                title: 'Fundoo',
                body: 'unlimited notes..'
            }, ],
        }
    },
    methods: {
        Togglebtn() {
            this.flag = !this.flag;
        },
        async handlesubmit() {
            service.userDisplayNotes().then(response => {
                this.notes.push(...response.data);
            })
        },
        toggle(){
            var blur=document.getElementById('blur');
            blur.classList.toggle('active');

            var popup=document.getElementById('popup');
            popup.classList.toggle('active');
        }
      
    }
}
</script>

<style lang="scss">
@import "@/styles/DisplayNotes.scss";
</style>

[DisplayNotes.scss]

.carddisplay-section{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: space-around;
    gap: 10px;
}
.container {
    height: 180px;
    background: #fff;
    padding: 7px;
    border-radius: 7px;
    box-shadow: 5px 5px 10px #e0dede;
    margin-top: 5%;
    margin-left: 18%;
    margin-right: -15%;
    float: left;
    width: 22%;
}
.card-content {
    h3 {
        font-size: 18px;
        font-family: 'Times New Roman', Times, serif;
        padding: 0px 10px;
    }
    p {
        font-size: 17px;
        width: 90%;
        height: 60px;
        font-family: Arial, Helvetica, sans-serif;
        width: 100%;
        border: none;
        // padding: 0px 10px;
        outline: none;
    }
}
.card-button {
    float: right;
    margin-top: -19px;
    margin-left: 240px;
    font-size: 14px;
    border: none;
    background: none;
    font-family: Arial, Helvetica, sans-serif;
}
.note-icons {
    visibility: hidden;
}
.note {
    &:hover {
        .note-icons {
            visibility: visible;
        }
    }
}
.imported-icons {
    margin-top: 17%;
}
#blur.active{
    filter:blur(0.5px);
    // pointer-events: none;
    // user-select: none;
}
#popup{
    position: fixed;
    top:40%;
    left:50%;
    transform: translate(-50%,-50%);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}
#popup.active{
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}

Answer 1

在 carddisplay-section 内部但在 container note 外部创建一个新元素以进行模糊处理。请参阅下面的评论。

<div class="carddisplay-section" >
  <div id="blur"> <!-- put the id='blur' on this new element -->
    <div  v-for="note in notes" :key="note.data" class="container note">          
      <div @click="toggle()" class="card-content">
        <h5>{{note.title}}</h5>
        <p>{{note.body}}</p>
      </div>
      <div class="import-icons">
        <icons class="imported-icons note-icons" />
        <button v-if="flag" class="card-button" type="button" @click="handlesubmit();Togglebtn();">Close</button>
      </div>
    </div>
  </div> <!-- dont' forget the closing tag is before the popup -->
<div id="popup">
    <UpdateNotes/>
</div>

如何在弹出窗口打开时模糊背景？

1 个答案: