前言

本文主要介紹彈窗的代碼，包括前端、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系列——弹窗代码编写与调用弹窗过程详解的全部內容，希望文章能夠幫你解決所遇到的問題。

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