前言

本文主要介绍弹窗的代码，包括前端、js、css样式，以及点击按钮调用弹窗的过程详解。

步骤如下：

step1 创建一个弹窗

Modal.vue

template

<template><div class="modal-bg" v-show="show" @mousemove="modalMove" @mouseup="cancelMove"><div class="modal-container"><div class="modal-header" @mousedown="setStartingPoint">{{ title }}</div><div class="modal-main"><slot></slot><p>弹窗里面</p></div><div class="modal-footer"><el-button round @click="cancel">取消</el-button><el-button type="primary" round @click="submit">确认</el-button></div></div></div>
</template>

script

<script>export default {name: 'Modal',props: {show: {type: Boolean,default: false},title: {type: String,default: '弹窗'},},data() {return {x: 0,y: 0,node: null,isCanMove: false}},mounted() {this.node = document.querySelector('.modal-container')},methods: {cancel() {this.$emit('cancel')},submit() {this.$emit('submit')},setStartingPoint(e) {this.x = e.clientX - this.node.offsetLeftthis.y = e.clientY - this.node.offsetTopthis.isCanMove = true},modalMove(e) {if (this.isCanMove) {this.node.style.left = e.clientX - this.x + 'px'this.node.style.top = e.clientY - this.y + 'px'}},cancelMove() {this.isCanMove = false}}}
</script>

style

<style scoped>.modal-bg {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 10;}.modal-container {background: #fff;border-radius: 10px;overflow: hidden;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);}.modal-header {height: 56px;background: #409EFF;color: #fff;display: flex;align-items: center;justify-content: center;cursor: move;}.modal-footer {display: flex;align-items: center;justify-content: center;height: 57px;border-top: 1px solid #ddd;}.modal-footer button {width: 100px;}.modal-main {padding: 15px 40px;}
</style>

step2 在router里面引入Modal.vue

import modal from '../components/Modal';return[{ path: 'modal', name: '弹窗', component: modal }]

step3 调用

template

<Modal :show="show" @cancel="cancel" @submit="submit"></Modal>

script

import Modal from '../../components/Modal';
export default {data() {return {show: false,}},components: {Modal},methods: {cancel() {// 取消弹窗回调this.show = false},submit() {// 确认弹窗回调this.show = false},showWindow(){this.show = true},changeRoute() {this.$router.push('/welcome/page2');}}
};

OK, GAME OVER!

更多精彩内容请关注：程序员高手之路

回复“vue项目”，免费获取以下项目视频教程

VUE系列——弹窗代码编写与调用弹窗过程详解相关推荐

JVM系列（一）：JVM类加载过程详解
Java 通过引入字节码和 JVM 机制,提供了强大的跨平台能力,理解 Java 的类加载机制是深入 Java 开发的必要条件. 一.Java代码执行流程 Java程序运行时,必须经过编译和运行两个步 ...
SCSF 系列：Smart Client Software Factory 启动过程详解
应网友要求,结合参考实现(BankBranchWorkbench)写一篇关于 SCSF 内部工作原理的文章,需要读者有 SCSF 基础.基本概念和基本理念后面相关文章介绍. SCSF 自动为我们建立了 ...
for根据ID去重_汽车ECU参数标定之配置Overlay RAM实现Qorivva MPC57xx系列MCU参数在线标定和代码重映射原理和方法详解...
内容提要引言 1. MPC5744P的Overlay RAM工作原理介绍 2 MPC5744P的Flash Overlay配置详解 2.1 平台Flash标定区域描述字寄存器配置字0--PFLASH ...
浅谈嵌入式MCU软件开发之S32K1xx系列MCU启动过程及重映射代码到RAM中运行方法详解
内容提要注:本文摘自NXP工程师胡恩伟的微信公众号"汽车电子expert成长之路",大家感兴趣可以关注一下. 引言 1. S32K1xx系列MCU启动过程详解(startup_S ...
vue中如何调用ios摄像头_vue2.0调用摄像头步骤详解
这次给大家带来vue2.0调用摄像头步骤详解,使用vue2.0调用摄像头的注意事项有哪些,下面就是实战案例,一起来看一下. 可以在github 上下载demo链接 vue组件代码 import {Ex ...
Git学习系列之Git基本操作提交项目（图文详解）
前面博客 Git学习系列之Git基本操作克隆项目(图文详解) 然后可以 cd 切换到 LispGentleIntro 目录, 新增或者修改某些文件.这里只是模拟一下操作, 实际情况可能是使用 Ecl ...
[系统安全] 四十四.APT系列(9)Metasploit技术之基础用法万字详解及防御机理
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
SpringSecurity权限管理框架系列(六)-Spring Security框架自定义配置类详解(二)之authorizeRequests配置详解
1.预置演示环境这个演示环境继续沿用 SpringSecurit权限管理框架系列(五)-Spring Security框架自定义配置类详解(一)之formLogin配置详解的环境. 2.自定义配置类 ...
Python 在子类中调用父类方法详解（单继承、多层继承、多重继承）
Python 在子类中调用父类方法详解(单继承.多层继承.多重继承) by:授客 QQ:1033553122 测试环境: win7 64位 Python版本:Python 3.3.5 代码实践 ...

VUE系列——弹窗代码编写与调用弹窗过程详解

前言

step1 创建一个弹窗

Modal.vue

template

script

style

step2 在router里面引入Modal.vue

step3 调用

template

script

OK, GAME OVER!

VUE系列——弹窗代码编写与调用弹窗过程详解相关推荐

最新文章

热门文章