1- 組件內容：

<template><div class="modal-bg"v-show="show"><div class="fade"></div><div class="modal-container"><div class="modal-header"><img :src="title"alt=""></div><div class="modal-main"><slot></slot></div><div class="modal-footer"><button @click="hideModal">取消</button><button @click="submit">確認</button></div></div></div> </template> <script> import $ from 'jquery' export default {name: 'Modal',props: {show: {type: Boolean,default: false},title: {type: String,default: ''},},methods: {hideModal () {this.$emit('hideModal')$('body').css({ 'height': 'auto', "overflow": "auto" });}} } </script> <style lang="scss" scoped> @import '../../../../css/_base.scss'; .modal-bg {width: 100%;height: 100%;background: red;.modal-header {display: flex;justify-content: center;img {object-fit: contain;width: 100%;}} } .fade {width: 100%;height: 100%;// background: rgba(0, 0, 0, 0.5);background: black;position: fixed;left: 0;top: 0;z-index: 99; } /*彈出層*/ .modal-container {width: 100%;position: fixed;left: 50%;top: 50%;margin-left: rc(-375);margin-top: rc(-390);z-index: 999;border-radius: rc(10); } </style>

2- 在組件內使用：

<span class="blue-look"v-if="news.image"@click="showImg()">[查看圖片]</span><Modal :show="show":title="title"@hideModal="hideModal"@submit="submit"><p>這里放彈窗的內容,沒有就不顯示~</p></Modal>

JS內容

data: function () {return {show: false,},components: {Modal},methods: {hideModal () {this.show = false},submit () {this.show = false}},showImg () {this.show = true;$('body').css({ 'height': '100%', "overflow": "hidden" });},

總結

以上是生活随笔為你收集整理的vue制作弹框，并且禁止滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。