封装的组件

<template>
<Modal footer-hide :closable="false" title="删除确认" v-model="modalShow" :styles="{top: '20px'}">
<div style="text-align:center">
<p>你确定删除吗?</p>
</div>
<Divider />
<div style="display: flex;flex-direction: row;justify-content:space-between;">
<Button @click="$emit('cancelModel')">取消</Button>
<Button type="primary" @click="$emit('okModel')">删除</Button>
</div>
</Modal>
</template>
<script>
export default {
name: "deletemodal",
props: {
modalShow: Boolean
}
};
</script>

组件引入

import DeleteModel from "../../components/DeleteModel/DeleteModel";

  components: {
DeleteModel
},

使用组件

 <DeleteModel :modalShow="modalShow" @cancelModel="cancelModel" @okModel="okModel" />

数据:

     modalShow: false,

子组件传递给父组件的方法的实现

   cancelModel() {
this.modalShow = false;
},
okModel() {
this.modalShow = false;
var arr = [];
arr.push(this.roleId);
deletcile(arr)
.then(res => {
this.$Message.success(res.data.msg);
this.reload();
})
.catch();
// console.log(e);
},

效果:

ivew 封装删除 对话框的更多相关文章

  1. js确认删除对话框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. ArticleRemoveDelDialog【基于AlertDialog的回收删除对话框】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 回收删除对话框,继承AlertDialog. 仿照钉钉的长按弹出的移除置顶对话框. 效果图 代码分析 继承AlertDialog: ...

  3. C#编程中,在页面上如何弹出确认删除对话框

    对于页面完成一个操作后,弹出一个对话框提示是否“操作成功”.举例如下:Response.Write("<script>alert('删除成功!')</script>& ...

  4. [转]angular2封装material2对话框组件

    本文转自:https://www.jianshu.com/p/da9978e25566 1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍.这里提供一个方案用 ...

  5. js封装删除数组指定的某个元素的方法

    首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: Array.prototype.indexOf = function(val) { for (var i = ...

  6. DuiVision开发教程(17)-对话框

    DuiVision的对话框类是CDlgBase. 代码中假设须要创建一个对话框,一般建议使用DuiSystem类中封装的若干对话框相关的函数来操作,包括创建对话框.删除对话框.依据对话框名获取对话框指 ...

  7. MFC模式对话框与非模式对话框 消息处理顺序

    对话框有两种创建方式:DoModal和Creat. 其中DoModal创建的是模态的对话框,而Creat创建的是非模态的对话框下面总结下他们的不同. 对于模态的对话框,在该对话框被关闭前,用户将不能在 ...

  8. SSM-CRUD入门项目——删除

    删除 分析 可以进行单个删除,直接点击每条记录后的删除按钮 批量删除,通过勾选checkbox框进行选择删除 单个删除: 通过发送DELETE请求的URL:/emp/{id} 这次我们先从contro ...

  9. 【转】VC 模式对话框和非模式对话框的创建,销毁和区别

    原文网址:http://blog.csdn.net/mycaibo/article/details/6002151 VC 模式对话框和非模式对话框的创建,销毁和区别   在WIN32中,模式对话框的创 ...

随机推荐

  1. delphi 每英寸相素点取值偏差

    在所有资料中,每英寸相素点之比一般是这两个值,即:0.0393700788  25.399999961392 但是在GDI编程中,却遇到LOGPIXELSX  LOGPIXELSY 在取值为96DPI ...

  2. Python学习之==>操作Redis

    一.redis简介 1.非关系型数据库 2.数据全部是存在内存里面 3.性能非常好,每秒支持30w次读写 4.可以通过备份数据库,把数据存到磁盘上来实现数据的持久化 二.操作redis 1.strin ...

  3. ReportManager

    package com.neusoft.report.engine; import com.neusoft.report.common.Logger; import com.neusoft.repor ...

  4. 来自数据源的 String 类型的给定值不能转换为指定目标列的类型 nvarchar

    .TrimEnd() 怀疑是否SqlBulkCopy是否存在某种bug,故而在系统中改写代码,用单个sql的插入数据方式,用循环逐条导入.结果是没问题.难道真的是SqlBulkCopy有某种bug?上 ...

  5. (一)VS2015下配置OpenGL

    刚开始用OpenGL,一开始不太明白配置库的原理,在VS2015下耗费了大量时间.这里将配置过程做个笔记,以供日后查看.配置过程中,需要下载cmake构建工具以及glew和glfw库. 下载地址为: ...

  6. TFS 删除工作区签出状态

    '//找出当前工作组未迁出的文件 delete tbl_pendingchange '

  7. 杭州集训Day4

    别问我为什么没有前三天,有时间再补~ 60+60+50=170. T1 . 坐等 memset0 ( 1s 256MB )( 原题:洛谷CF1151E Number of Components ) 树 ...

  8. 006 Notepad++ 运行 C/C++

    目录 0. 前言 1. 准备 2. 开工 setp 1 step 2 step 3 step 4 step 5 step 6 3. 修改与删除 3.1修改名称.快捷键 3.2 删除 4. 运行 5. ...

  9. glide使用总结

    1 glide是什么 glide是一个图片加载和缓存库. 2 glide的使用 第一,添加依赖 implementation 'com.github.bumptech.glide:glide:4.5. ...

  10. Python实现批量执行华为交换机脚本

    #!/usr/bin/python3 # -*- coding:utf-8 -*- import paramiko import time ssh = paramiko.SSHClient() key ...