vue实现弹窗（配图）

Dear 丶 2022-02-28 10:46 377阅读 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 条评论，377人围观）

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

相关阅读

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

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

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

相关 VUE_vant密码弹窗

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

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

相关 Vue之简易弹窗组件

组件模板 Notice.vue <template> <div class="box" v-if="isShow"> <h3>{ {

古城微笑少年丶/ 2022年12月03日 09:14/ 0 赞/ 156 阅读

相关样式集（八）弹窗，规则弹窗，半透明弹窗

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

待我称王封你为后i/ 2022年11月05日 05:27/ 0 赞/ 246 阅读

相关 Vue注册全局组件-弹窗组件

在src目录下新建components文件夹 1.新建module文件夹，然后新建v-alert.vue <template> <transition

短命女/ 2022年05月14日 00:52/ 0 赞/ 219 阅读

相关 JS实现图片弹窗

使用JavaScript和CSS实现点击图片缩略图，创建图片弹窗的功能。需要配置HTML页面，JS代码和CSS代码 HTML代码： <body>

阳光穿透心脏的1/2处/ 2022年04月25日 02:20/ 0 赞/ 307 阅读

相关在vue中使用 dialog 弹窗

> 使用弹窗进行交互可以提升用户体验度，使页面也变得简洁官网介绍：[http://element-cn.eleme.io/\/zh-CN/component/dialog\

Bertha 。/ 2022年04月04日 10:40/ 0 赞/ 1084 阅读

相关 vue实现弹窗（配图）

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

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

相关 vue 封装弹窗组件注意

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

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

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

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

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