封装的组件

<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. Android NDK下载

    http://dl.google.com/android/ndk/android-ndk-r10d-linux-x86_64.bin https://dl.google.com/android/rep ...

  2. 基本vim快捷键

    w,e等单词间跳转,英文字符(除了_),数字,符号,空格 都被vim独立看成独立的词

  3. 利用Eclipse CDT 阅读C/C++代码

    本文转自: https://xbgd.iteye.com/blog/1259544 常见阅读代码的工具有 , visual c++, visual studio + va(visual assista ...

  4. 打开Excel提示内存不足

    来越南出差第一天,有个越南妹子跟我反应说Excel打不开,提示的是很常见的“内存不足”的错误, 这种问题一般的判断就是打开的程序太多了,关掉一些就可以了,重启都没解决, 在网上找了下,腾讯管家的这篇h ...

  5. C#异常操作

    C#异常处理子系统包括: Try:需要异常机制的函数在其中运行 Catch:捕获异常 Throw:抛出异常 Finally:在try结束实现 C#异常主要在Exception类中,而在CLR机制中的异 ...

  6. cocos2dx基础篇(16) 基本绘图DrawPrimitives

    [3.x] (1)去掉前缀 "cc" (2)将 ccDraw***() 封装到了 DrawPrimitives 命名空间中. (3)重写绘图函数:         draw(Ren ...

  7. Spoj 2798 Qtree3

    一棵结点为黑色或白色的树,初始都是白色的.有两种操作 1 将一个结点换颜色 2 询问从根到结点u路径上面的第一个黑色点,没有则输出-1 InputIn the first line there are ...

  8. dbvisualizer安装

    1. 下载DbVisualizer安装包. 2.解压. 无论是哪个版本的dbvisualizer破解版, 都可以找到安装程序(例dbvis_windows-x64_10_0_10.exe), dbvi ...

  9. [转帖]解决K8S 安装只有 一直提示:kernel:unregister_netdevice: waiting for eth0 to become free. Usage count = 1 的方法

    Centos7 终端报Message from syslogd :kernel:unregister_netdevice https://www.jianshu.com/p/96d7e2cd9e99 ...

  10. vue vuex应用

    vue结构图: vuex为vue的一个插件,用来管理共享数据的,局部数据声明在自己组件内部. 没有使用vuex时,所有共享数据和操作数据的方法都声明在父组件内,数据的通信用props及pubsub等. ...