vue实现弹窗（配图）

Dear 丶 2022-02-28 10:46 576阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]

<template>
        <el-container>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    
        <el-dialog :visible.sync="dialogVisible" width="50%" style=" text-align: center;" :before-close="handleClose">
          
          <span>弹窗内容</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
    </el-container>
    </template>
    <script>
    // import repassword from './component/repassword'//引入密码修改模板
      export default {
        data() {
          return {
            dialogVisible: false
          };
        },
        methods: {
          handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
          },
        },
        components:{    
          // repassword
        }
      };
    </script>
    <style>
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]: /images/20220228/bfbbb8c3cc45447aa3c8463988b34eba.png

发表评论取消回复

表情：

评论列表（有 0 条评论，576人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 弹窗实现方法

![0008dc9e0b9c4e8b89f662df5f2020bb.jpeg][] Vue实现弹窗的方法有很多种，这里给出一个简单的示例： 1. 首先，在Vue项目中创

逃离我推掉我的手/ 2023年10月10日 22:46/ 0 赞/ 209 阅读

相关 Vue弹窗的使用之关闭弹窗

![在这里插入图片描述][1b80f7d3deec4b409ea303d03692d050.png_pic_center] [1b80f7d3deec4b409ea303d

不念不忘少年蓝@/ 2023年10月03日 23:46/ 0 赞/ 172 阅读

相关 Vue+Openlayer使用overlay实现弹窗弹出显示与关闭

场景 Vue+Openlayers实现地图上绘制线： [Vue+Openlayers实现地图上绘制线\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客]

灰太狼/ 2023年10月02日 14:51/ 0 赞/ 116 阅读

相关 vue css 弹窗

不使用插件显示弹窗，纯css样式简单的一个弹窗样式 ![f24bba84cccc424a9a9cef1a7ab78251.png][] html <div cla

╰+哭是因爲堅強的太久メ/ 2023年09月27日 22:53/ 0 赞/ 35 阅读

相关 vue+element实现弹窗拖拽

因为element没有自带弹窗拖拽效果，所以就需要自定义指令去控制可能写的不好，请多指教首先新建一个js,作为指令 import Vue f

客官°小女子只卖身不卖艺/ 2023年03月13日 11:41/ 0 赞/ 27 阅读

相关 vue el-dialog 弹窗实现拖拽效果

文章目录前言一、如何在 elementUI el-dialog 对话框添加拖拽操作？ 1. 首先我们将新建一个js文件 dialog.js 放

我不是女神ヾ/ 2022年12月25日 02:57/ 0 赞/ 779 阅读

相关 VUE_vant密码弹窗

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

谁践踏了优雅/ 2022年12月10日 08:55/ 0 赞/ 407 阅读

相关 vue实现弹窗（配图）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Dear 丶/ 2022年02月28日 10:46/ 0 赞/ 577 阅读

相关 vue 封装弹窗组件注意

父组件 <template> <div> <p @click="onDelete"> 打开 </p>

ゝ一世哀愁。/ 2021年09月07日 06:13/ 0 赞/ 627 阅读

相关 vue 通用的toast弹窗 toast 弹窗提示

![20190829171055833.gif][] <!DOCTYPE html> <html lang="en"> <head>

水深无声/ 2021年07月25日 00:45/ 0 赞/ 796 阅读