vue制作弹框，并且禁止滚动

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制作弹框，并且禁止滚动相关推荐

vue 编辑弹框，编辑页面，列表数据也会跟着变
vue 编辑弹框,编辑页面,列表数据也会跟着变 editPoster(row) {// this.form = JSON.parse(JSON.stringify(row)) //避免引用传递,做一次 ...
Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题）
Vue 实现弹框自由拖拽(不出可视范围.解决快速拖动问题) 由于页面中弹框很多,往往会挡住想要查看的内容.从而,有了自由移动拖拽弹框的需求:但在使用的过程中发现,一开始编写的drag.js文件会移出可 ...
vue 每次弹框都初始化
之前弹框都是下图这种: 通过detailOpen变量控制是否显示弹框但这种最近在整合tinymce富文本编辑器的时候,发现第二次弹框数据没有回填原因是因为第一次弹框关闭后,没有初始化,从而影响了后 ...
vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件
一.需求描述有些项目会频繁用到下图这种类型的遮罩弹框,最好的方法是封装为公共的组件,直接复用. image.png image.png 二.方法: 1.子组件:遮罩弹框通过父组件传参,来显示组件内容 ...
HTML配合js制作弹框，弹出信息框展示后台内容
最近,应公司要求需要制作一个弹出框,需求是在鼠标停留在字段上,就会弹出一个信息框弹出从后台查出来的内容.因为本猿是后端开发,对于前端的东西是半桶水,一知半解,它认识我我不认识它.所以在此记录一下Dem ...
html5加vue弹窗,Vue制作弹出对话框组件
之前写过一个组件的文章,算是入门,也是官网的例子,这个纯粹自己再写一遍,之前的文章 html结构这也是官网的一个例子首先我把生成后的html复制过来,分成两部分,一部分是一个按钮,用来弹出对话框, ...
layui弹框回车禁止提交
在form下加一个隐藏的select就解决了 <div class="layui-input-inline" style="display: none;" ...
Vue ELement弹框被遮罩层挡住
分享一个小哥哥的文章,问题已解决,分析的很透彻,希望对大家有帮助 https://blog.csdn.net/mr_javascript/article/details/80888681
移动端下弹框禁止背景滑动
移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的. 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{height ...

vue制作弹框，并且禁止滚动

vue制作弹框，并且禁止滚动相关推荐

最新文章

热门文章