快捷導(dǎo)航

vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼

更新時(shí)間：2022年08月09日 09:53:14 作者：http____

這篇文章主要介紹了vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

實(shí)現(xiàn)vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作

一、手寫(xiě)遮罩層方法

1. 效果

2. 代碼

AddTask.vue是我自定義的組件，即要彈出的彈窗，不是此筆記重點(diǎn)，此處不做詳細(xì)說(shuō)明。

<template>
  <div class="bg-cover" v-if="showCover"></div>
  <div class="column" style="width: 25px;">
  	<q-btn v-for="n in 12" round :color="'teal-'+n" icon="add" class="q-ma-lg"/>
  </div>
  <q-btn round color="primary" icon="add" size="24px" class="fixed-bottom-right q-ma-lg" @click="OpenAddTask()" @closeAddTask="closeAddTask" />
  <AddTask :showAddTask.sync="AddTaskFlag" class="addtask-box" @closeAddTask="closeAddTask"></AddTask>
</template>

<script setup>
import { ref } from "vue";
import AddTask from '../components/AddTask.vue'

//添加任務(wù)彈窗
let AddTaskFlag = ref(false);
let showCover = ref(false);

function OpenAddTask(){
  AddTaskFlag.value = true;
  showCover.value = true;
  document.body.style.overflow = "hidden"
}
function closeAddTask(){
  AddTaskFlag.value = false;
  showCover.value = false;
  document.body.style.overflow = "auto"
}

</script>

<style scoped lang="scss">

.addtask-box{
  z-index: 99;
  top: 300px;
}

.bg-cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  z-index: 98;
}
</style>

3. 代碼分析

4. 改進(jìn)

上述代碼在彈窗較小，不需要滾動(dòng)彈窗時(shí)可用，因?yàn)樯鲜龇桨笗?huì)導(dǎo)致彈窗也無(wú)法滾動(dòng)而使彈窗內(nèi)容顯示不完全。
如下圖，人員列表未顯示完全。

解決方法：給彈出層設(shè)置overflow-y: scroll;。
效果展示：

4. 將背景遮罩層封裝成組件使用

將背景遮罩層封裝成一個(gè)組件，可以實(shí)現(xiàn)復(fù)用，而不需要在每一個(gè)需要使用的頁(yè)面都寫(xiě)一遍html和css樣式。

BgCover.vue：

<template>
  <div class="bg-cover" v-if="showCover"></div>
</template>

<script setup>
const props = defineProps(['showCover'])
</script>

<style scoped lang='scss'>
.bg-cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  z-index: 98;
}
</style>

其他組件中需要使用時(shí)：

<template>
    <BgCover :showCover.sync="showCoverFlag"></BgCover>
    <div class="column" style="width: 25px">
        <q-btn v-for="n in 12" round :color="'teal-' + n" icon="add" class="q-ma-lg" />
    </div>
    <q-btn round color="primary" icon="add" size="24px" class="fixed-bottom-right q-ma-lg" @click="OpenAddTask()"
        @closeAddTask="closeAddTask" />
    <AddTask :showAddTask.sync="AddTaskFlag" class="addtask-box" @closeAddTask="closeAddTask"></AddTask>
</template>

<script setup>
import { ref } from "vue";
import AddTask from "../components/AddTask.vue";
import BgCover from "../components/BgCover.vue";

//添加任務(wù)彈窗
let AddTaskFlag = ref(false);
let showCoverFlag = ref(false);

function OpenAddTask() {
    AddTaskFlag.value = true;
    showCoverFlag.value = true;
    document.body.style.overflow = "hidden";
}
function closeAddTask() {
    AddTaskFlag.value = false;
    showCoverFlag.value = false;
    document.body.style.overflow = "auto";
}
</script>

<style scoped lang="scss">
.addtask-box {
    z-index: 99;
    top: 300px;
}

</style>

二、quasar 方法

利用quasar dialog組件的 persistent 屬性。

代碼：

<template>
    <div class="column" style="width: 25px">
        <q-btn v-for="n in 12" round :color="'teal-' + n" icon="add" class="q-ma-lg" />
    </div>
    <q-btn round color="primary" icon="add" size="24px" class="fixed-bottom-right q-ma-lg" @click="OpenAddTask()"
        @closeAddTask="closeAddTask" />

    <q-dialog v-model="AddTaskFlag" persistent>
        <AddTask :showAddTask.sync="AddTaskFlag" class="addtask-box" @closeAddTask="closeAddTask"></AddTask>
    </q-dialog>

</template>

<script setup>
import { ref } from "vue";
import AddTask from "../components/AddTask.vue";

//添加任務(wù)彈窗
let AddTaskFlag = ref(false);

function OpenAddTask() {
    AddTaskFlag.value = true;
}
function closeAddTask() {
    AddTaskFlag.value = false;
}
</script>

<style scoped lang="scss">
.addtask-box {
    z-index: 99;
    top: 300px;
}
</style>

到此這篇關(guān)于vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue點(diǎn)擊出現(xiàn)彈窗背景變暗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: