vuejs2.x中confirm弹窗如何控制提示语和点击确定与取消事件。。来上代码吧!

弹窗组件:

 <template>
  <div class="modal-mask">
    <div class="modal-confirm">
      <h4 class="confirm-header">操作提示</h4>
      <div class="confirm-content">
        {{ content }}
      </div>
      <div class="confirm-btns">
        <button class="btn" v-on:click="op('cancel')">取 消</button>
        <button class="btn btn-primary" v-on:click="op('ok')">确 定</button>
      </div>
    </div>
  </div>
</template>

调用组件的页面:

 <template>
    <div>
        <h1>Alert</h1>
        <button class="btn btn-primary" v-on:click="alert">alert</button>
        <confirm :parent-msg="parentMsg" v-show="confirmshow"></confirm>
    </div>
</template>

3个回答

这个是父组件

 <template>
  <div id="app">
    <confirm :m="msg"></confirm>
  </div>
</template>
<script>
  import confirm from "./components/confirm";
  export default {
    name: 'app',
    data(){
      return {
        msg:"父组件的message"
      }
    },
    components:{
      confirm
    }
  }
</script>

子组件

 <template>
    <p>{{m}}</p>
</template>
<script>
  export default {
    props:["m"]
  }
</script>

就这么点事,如果需要双向绑定还得改

I1326
I1326 回复qq_15007109:不点的时候是显示子组件自己的message么?如果是的话直接在你写的op事件里吧parent-msg赋值给子组件的data就好了啊
接近 3 年之前 回复
qq_15007109
bing_15007 ...这个我知道,我想知道如何在父组件中点击显示弹窗时候改变弹窗中的提示语和操作确定与取消按钮。
接近 3 年之前 回复

发提问之前可以预览看下先。。这些的是个啥..

qq_15007109
bing_15007 不好意思,刚才没搞好,现在更新了!
接近 3 年之前 回复

写麻烦了,非父子关系的这么搞,也能用,非要props传递的话我再去搞

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组建通信</title>
</head>
<style>
    .chlid{width: 400px;border:1px solid red;margin:0 auto;text-align: center;}
</style>
<body>
    <div id="box">
        <parent></parent>
    </div>
    <template id="chlid">
        <div class="chlid">
            <span>弹框</span>
            <p>{{a}}</p>
            <button @click="en">enter</button>  
            <button @click="ca">cancle</button>
        </div>
    </template>
    <template id="parent">
        <div>
            <p>父组件</p>
            <p>{{a}}</p>
            <button @click="toggle">呼叫弹窗</button>
            <chlid v-show="key"></chlid>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            var Event=new Vue();
            Vue.component('parent', {
                template: '#parent',
                data:function(){
                    return {
                        a:'父组件的msg',
                        key:false
                    }
                },
                methods:{
                    toggle:function(){
                        this.key=!this.key;
                        Event.$emit('parentMsg',this.a);
                    }
                },
                mounted(){
                    Event.$on("chlidMsg",function(a){
                        this.key=a;
                    }.bind(this));
                }
            });
            Vue.component("chlid",{
                template:"#chlid",
                data:function(){
                    return {
                        a:"子组件数据"
                    }
                },
                methods:{
                    en:function(){
                        alert("enter to do");
                        Event.$emit("chlidMsg",false);
                    },
                    ca:function(){
                        alert("cancle to do");
                        Event.$emit("chlidMsg",false);
                    }
                },
                mounted(){
                    Event.$on('parentMsg',function(a){
                        this.a=a;
                    }.bind(this));
                }
            })
            new Vue({
                el:'#box'
            });
        };
    </script>
</body>
</html>



qq_15007109
bing_15007 回复I1326: 可以照到上面帮我简单写一下嘛? 刚接触这个还不是很熟悉,搞了好久还没搞出来,麻烦麻烦
接近 3 年之前 回复
I1326
I1326 回复qq_15007109: 抱歉刚看到,其实就是自组建绑定数据<confirm :m="数据"></confirm>,然后子组建内部props:["m"]就齐了
接近 3 年之前 回复
qq_15007109
bing_15007 可以帮帮忙用props来做一个例子嘛 ? 有劳
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
this.$Modal.confirm弹窗中引入的组件为什么报Unknown

import test1 from './test' ![图片说明](https://img-ask.csdn.net/upload/201808/14/1534213101_765753.png) components:{ test1 }, 报错:Unknown custom element: <test1> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

自定义Ext.Msg.confirm确认对话框?

Ext.Msg.confirm的按钮是yes 和 no 我要怎么样才能把他修改为 ok 和 cancel? [b]问题补充:[/b] 没有办法,我必须使用confirm方法,但是又得修改它的按钮,哥们帮 帮忙吧,谢谢了!

Ext.MessageBox.confirm的问题!请大家帮帮忙。

怎么实现像普通js的confirm的功能呢,我知道ext这样写:<br> function r(btn){<br> if(btn!='yes'){<br> //执行删除操作<br> }<br> //不操作<br> }<br> function is_del(){<br> Ext.MessageBox.confirm('提示', '是否确定删除!',r);<br> }<br> 现在的问题是,我执行的操作,要怎么传递数据,比如,有很多条数据,我要根据数据的id去删除,我怎么把id传递过去呢。原来的是这么写: a href="../delete.action?id=1448453186765" onclick="confirm('确定删除?')"; 我怎么实现比较好呢,上一个方法我怎么才能把id传进去呢!请大家指点!谢谢<br/><strong>问题补充</strong><br/>没看明白吗都

C#使用 webBrowser弹窗问题 confirm弹窗

在提交订单的时候会弹confirm 网上看到的方法都是试过了 全部无效 如何才能点击确定让程序接的运行 在线求方法

navigator.notification.confirm 回调函数

我有一个功能是删除数据,然后用navigator.notification.confirm弹出消息让用户确认,当点取消时,程 序正常,但是点确认后,删除无法执行,就像线程 被阻塞了一样。但是我再点一次删除按钮,让那弹出框再出现一次,这时删除URL才能请求服务器。(再出现时会立即执行上次的动作,不需要点确定或取消)。 这是啥情况呢

layer.confirm 在弹出之前的回调函数

layer.confirm 弹出一个选取起止日期的弹窗,用的layerData 但是弹出之后没有选择日期的效果,layer.confirm 怎么初始化才能选择起止日期? ``` <body> <button id="show">show</button> <div id="time"> <div class="layui-inline"> <label class="layui-form-label">日期范围</label> <div class="layui-input-inline"> <input type="text" class="layui-input" id="test6" placeholder=" - "> </div> </div> </div> <script type="text/javascript"> $(function(){ laydate.render({ elem: '#test6', range: true }); $("#show").click(function(){ var show = $("#time").html(); layer.confirm(show,{ title: "日期选择", btn: ['确认', '取消'], },function(){ },function(){ }) }); }) </script> </body> ```

vb.net Cefsharp重写alert与confirm弹窗

以下内容是以c#写的,我不明确认点写下 https://blog.csdn.net/daye5465/article/details/77482997 1、 文章提到 添加类JsDialogHandler,实现接口CefSharp.IJsDialogHandler 这个类是从那里找呢? 2、inherits有错,这个是不是第1点的类加入,就可以解决 ![图片说明](https://img-ask.csdn.net/upload/201906/02/1559487783_222943.jpg) 3、 初始化browser时,将自定义的弹窗注册上 _browser = new CefSharp.WinForms.ChromiumWebBrowser(url) { BrowserSettings = { DefaultEncoding = "UTF-8" }, MenuHandler = new MenuHandler(), LifeSpanHandler = new OpenPageSelf(), JsDialogHandler = new JsDialogHandler(), Dock = DockStyle.Fill, }; 以上为文章写的,我原始的如下,要如何修改成文章上可以用的呢? browser = New ChromiumWebBrowser(FullFileName) With { .Dock = DockStyle.Fill }

layer的confirm框,为什么不执行对应的函数呢?

1.会弹出123 2.但是不会弹出1 3.也不会弹出2 4.确认提交confirm框会一闪而过,之后表单提交 ``` <form method="post" action="<%=basePath%>questionnaire/save" onsubmit="return check_form()" id="form_1"> </form> function check_form(){ alert(123); layer.confirm('确认提交?', { btn: ['确定','取消'] //按钮 }, function(index){ alert(1); layer.msg('感谢您参与平台调研,稍后会有工作人员联系您!', {icon: 1}); return true; }, function(index){ alert(2); layer.msg('已取消!', {icon: 1}); return false; } ); } ```

$.confirm消息弹出层,content内容是一个form表单,请问下在formSubmit中的action中该如何提交content中form表单中的内容,以post提交?

``` $.confirm({ title: '修改', content: '' + '<form class="" action="" method="post" onsubmit="return false;">' + ' <div class="form-group">'+ ' <label>邮箱</label>'+ ' <div>'+ ' <input class="" type="email" name="" placeholder="请输入邮箱..">'+ ' </div>'+ ' </div>'+ ' <div>'+ ' <label>密码</label>'+ ' <div>'+ ' <input type="password" name="" placeholder="请输入密码..">' + ' </div>'+ ' </div>'+ ' <button type="submit">提交</button>'+ ' </form>', buttons: { formSubmit: { text: '提交', btnClass: 'btn-blue', action: function () { } }, cancel: { text: '取消' }, }, ```

使用mint-ui的messagebox,点击“确认”按钮的时候,弹窗消失过程

使用mint-ui的messagebox,点击“确认”按钮的时候,弹窗消失过程,‘确认’两个字颜色会出现组件默认颜色,但是字体颜色我已经改成其他了 ![图片说明](https://img-ask.csdn.net/upload/201809/04/1536033248_570706.png)

SweetAlert如何实现点击Confirm之后自动关闭

``` swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm) { swal({ title: "Auto close alert!", text: "I will close in 2 seconds.", timer: 0, showConfirmButton: false }); alert('asd'); } else { swal("Cancelled", "Your imaginary file is safe :)", "error"); } }); ``` 像这段代码,可以实现点击Confirm弹出一个新的SweetAlert框,原来的框会自动关闭,但是当我把function中的代码改成alert('hello')之后,没有调用swal方法,那么虽然alert可以正常执行,但是原来的框就不能自动关闭了。所以想请问下有没有什么方法可以在回调函数中使用自定义方法,但是又能够自动关闭原来的swal弹框。卡很久了,望大家赐教。

如何调用JavaScript中confirm()的返回值?

大家好! 我是一名JavaScript初学者,没有其他语言基础, 在学习中,我想先对这门语言有一个宏观纵览,有了编程的思路,再回到细节中夯实基本功,以避免“淹死”到那些术语和细节中 我想实现这样一个功能: 1、利用prompt()函数让用户输入姓名 2、利用confirm()函数判断用户的性别 3、confirm()返回真,则alart()显示“你好,××先生! 反之,显示“你好,××女士!” 我基本功很差,自说自话的写了以下代码, <script> var name=prompt("你的名字叫什么?"); confirm("你是男士吗?"); function judgeGender() { var r=confirm("你是男士吗?") var mr="先生" var miss="女士" if(r==true) { retune mr } else { retune miss } } alert("你好,"+name+function judgeGender()+"!") </script> 这段代码根本不好使,恳请大哥大姐能帮我完善这段代码成为能正常运行的代码 以便我钻研品读,找出应该加强的基本知识,万分感谢!

这个窗口是用的$.ligerDialog.open弹出来的,怎么给这个右上角的X号设置点击事件

![图片说明](https://img-ask.csdn.net/upload/201710/17/1508210183_233378.png)

jsp删除记录之前弹出确认提示窗口

如题,删除一条记录时,弹出确认窗口,各种方式试过了,要木点击没反应,要木没有弹窗直接转到删除页面,还有弹窗的,不管确认还是取消都转到另一个页面 1.out.print("<td width='3%'><a href=xxx.jsp?rn_no="+rs.getString("rn_no")+" onclick=javascript:window.confirm('ssss');><image src=....</td>"); 这种虽然弹窗,但是点取消也跳转,加个return就不弹窗直接跳,这里面还有个奇怪的现象,那个confirm里的字符串参数中间有空格就失效了。 2.<a href='javascript:deleteOK("+rs.getString("rn_no")+")'><image... <script type="..."> function deleteOK(id) { if confirm("ssss") { this.location = "xxx.jsp?rn_no="+id; } } </script> 这个完没反应,就列举这两个,其他的不写,手机敲地慢。 不知道哪里出了问题,js真难调试,烦死了。 在线急等,先谢各位

firefox 为什么confirm 弹出的框被弹出的模式窗体挡住了

firefox 为什么confirm 弹出的框被弹出的模式窗体挡住了

vb.net Cefsharp重写alert与confirm弹窗-数据传不回原本的form

我将本form写了两个class Public Class frmOfflineMap_cef 这是我主页的部分 end class 另一个写的是 Public Class JsDialogHandler Implements IJsDialogHandler ............................. End Class 我在原本的form,写了一个textboxt1,但怎么都传不回去呢 请问怎处理呢? ![图片说明](https://img-ask.csdn.net/upload/201906/03/1559573073_454694.jpg)

ExtJs中MessageBox对象,如何同步执行代码?

官方文档说,MessageBox对象是异步,也就是说不会影响后面代码的执行,如果想异步,必须使用回调函数,我看了相关说明和做实验,也没弄明白,不同于window对象的alert方法,请问如何实现异步执行?

JS调用confirm,返回undefined!

小弟我也是第一次出现这个问题,由于html标签是在PHP代码中生成的,由onclick触发一个自定义的function,并向function传参,根据参数值再弹出confirm对话框,但是在console.log这个confirm的返回值的时候发现是undefined,所以无法进行下一步动作,求解答! 使用的框架是基于ThinkPHP改的 PHP生成标签的代码如下: ``` $str_ .= '<li id="lis_'.$n.'"><span class="'.$cls.'"></span><span class="lietext">'.$detailName.'</span>'; $str_ .= '<a href="javascript:void(0)" rel="" title="删除" onclick="buttonStatus(\'Del\',\''.$ke.'\',\''.$noteUrl.'\',\''.$kt.'\',\''.$n.'\',\''.$noteName.'\')" class="btn">删除</a>'; $str_ .= '<span class="liesu"></span><a rel="" href="javascript:void(0)" title="预览" onclick="buttonStatus(\'Check\',\''.$ke.'\',\''.$noteUrl.'\',\''.$kt.'\',\''.$n.'\',\''.$noteName.'\')" class="btn">预览</a></li>'; 前端js的自定义function如下: /************协议展示 删除与预览*************/ function buttonStatus(where,target,url,num,id,tarName,attachID){ var btn = '#lis_'+id; $(btn).addClass('lis_'); $('.lis_').attr('style','background:#22A460'); $(btn).attr('style','background:#357618'); if(where == 'Check'){ $('#whichTitle').html(tarName+" 预览"); $('#ifram').attr('src',url); } var mes = confirm("确认删除这条信息?"); if(mes==true && where == 'Del'){ console.log('123');return; $.post("{:Helper::createLink('sale/sign/sessionDel')}",{"tar":target,"path":url,"number":num,"attachID":attachID},function(res){ $(btn).remove(); }); }else{ return false; } } /************协议展示删除与预览 结束*************/ ```

Ext.MessageBox.alert如何控制提示框的大小

当Ext.MessageBox.alert(msg1)弹出提示msg1后,再弹出其它提示如msg2时,若msg1的长度较短,msg2将会换行,特别扭。如何解决呢?实现消息框文本随消息长度的自动调整呢?

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Python可以这样学(第四季:数据分析与科学计算可视化)

Python可以这样学(第四季:数据分析与科学计算可视化)

组成原理课程设计(实现机器数的真值还原等功能)

实现机器数的真值还原(定点小数)、定点小数的单符号位补码加减运算、定点小数的补码乘法运算和浮点数的加减运算。

javaWeb图书馆管理系统源码mysql版本

系统介绍 图书馆管理系统主要的目的是实现图书馆的信息化管理。图书馆的主要业务就是新书的借阅和归还,因此系统最核心的功能便是实现图书的借阅和归还。此外,还需要提供图书的信息查询、读者图书借阅情况的查询等

土豆浏览器

土豆浏览器可以用来看各种搞笑、电影、电视剧视频

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

Java8零基础入门视频教程

Java8零基础入门视频教程

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

TTP229触摸代码以及触摸返回值处理

自己总结的ttp229触摸代码,触摸代码以及触摸按键处理

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

java jdk 8 帮助文档 中文 文档 chm 谷歌翻译

JDK1.8 API 中文谷歌翻译版 java帮助文档 JDK API java 帮助文档 谷歌翻译 JDK1.8 API 中文 谷歌翻译版 java帮助文档 Java最新帮助文档 本帮助文档是使用谷

Ubuntu18.04安装教程

Ubuntu18.04.1安装一、准备工作1.下载Ubuntu18.04.1 LTS2.制作U盘启动盘3.准备 Ubuntu18.04.1 的硬盘空间二、安装Ubuntu18.04.1三、安装后的一些工作1.安装输入法2.更换软件源四、双系统如何卸载Ubuntu18.04.1新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列...

快速排序---(面试碰到过好几次)

原理:    快速排序,说白了就是给基准数据找其正确索引位置的过程.    如下图所示,假设最开始的基准数据为数组第一个元素23,则首先用一个临时变量去存储基准数据,即tmp=23;然后分别从数组的两端扫描数组,设两个指示标志:low指向起始位置,high指向末尾.    首先从后半部分开始,如果扫描到的值大于基准数据就让high减1,如果发现有元素比该基准数据的值小(如上图中18&amp;lt...

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

HTML期末大作业

这是我自己做的HTML期末大作业,花了很多时间,稍加修改就可以作为自己的作业了,而且也可以作为学习参考

Python数据挖掘简易入门

Python数据挖掘简易入门

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

C++语言基础视频教程

C++语言基础视频教程

UnityLicence

UnityLicence

软件测试2小时入门

软件测试2小时入门

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

Python数据分析师-实战系列

系列课程主要包括Python数据分析必备工具包,数据分析案例实战,核心算法实战与企业级数据分析与建模解决方案实战,建议大家按照系列课程阶段顺序进行学习。所有数据集均为企业收集的真实数据集,整体风格以实战为导向,通俗讲解Python数据分析核心技巧与实战解决方案。

YOLOv3目标检测实战系列课程

《YOLOv3目标检测实战系列课程》旨在帮助大家掌握YOLOv3目标检测的训练、原理、源码与网络模型改进方法。 本课程的YOLOv3使用原作darknet(c语言编写),在Ubuntu系统上做项目演示。 本系列课程包括三门课: (1)《YOLOv3目标检测实战:训练自己的数据集》 包括:安装darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 (2)《YOLOv3目标检测:原理与源码解析》讲解YOLOv1、YOLOv2、YOLOv3的原理、程序流程并解析各层的源码。 (3)《YOLOv3目标检测:网络模型改进方法》讲解YOLOv3的改进方法,包括改进1:不显示指定类别目标的方法 (增加功能) ;改进2:合并BN层到卷积层 (加快推理速度) ; 改进3:使用GIoU指标和损失函数 (提高检测精度) ;改进4:tiny YOLOv3 (简化网络模型)并介绍 AlexeyAB/darknet项目。

超详细MySQL安装及基本使用教程

一、下载MySQL 首先,去数据库的官网http://www.mysql.com下载MySQL。 点击进入后的首页如下:  然后点击downloads,community,选择MySQL Community Server。如下图:  滑到下面,找到Recommended Download,然后点击go to download page。如下图:  点击download进入下载页面选择No...

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

董付国老师Python全栈学习优惠套餐

购买套餐的朋友可以关注微信公众号“Python小屋”,上传付款截图,然后领取董老师任意图书1本。

爬取妹子图片(简单入门)

安装第三方请求库 requests 被网站禁止了访问 原因是我们是Python过来的 重新给一段 可能还是存在用不了,使用网页的 编写代码 上面注意看匹配内容 User-Agent:请求对象 AppleWebKit:请求内核 Chrome浏览器 //请求网页 import requests import re //正则表达式 就是去不规则的网页里面提取有规律的信息 headers = { 'User-Agent':'存放浏览器里面的' } response = requests.get

web网页制作期末大作业

分享思维,改变世界. web网页制作,期末大作业. 所用技术:html css javascript 分享所学所得

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

相关热词 c# 开发接口 c# 中方法上面的限制 c# java 时间戳 c#单元测试入门 c# 数组转化成文本 c#实体类主外键关系设置 c# 子函数 局部 c#窗口位置设置 c# list 查询 c# 事件 执行顺序
立即提问
相关内容推荐