尝试写一个Vue.js的comfirm对话框component！

williamwen1986 发布于2019-08-20 15:10 / 2121人阅读

摘要：第一次尝试，感觉是个失败经历了方法一代码如下与子组件交流，一开始就想到了用动态绑定到子组件的这样做我们可以很容易在父组件通过改变从而让显示但是怎么让消失组件实例的作用域是孤立的。

本功能适用于浏览器
正在写一个web app，经常用到comfirm，为了UI的整体一致，还是想自己写一个component。
第一次尝试，感觉是个失败经历了......

方法一

代码如下




    
    Document

与子组件交流，一开始就想到了用props
动态绑定isShow到子组件的props——ishow

这样做我们可以很容易在父组件通过改变isShow从而让dialog显示
但是怎么让dialog消失？

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。

以上来自官网

不能直接在子组件改变prop这就有点麻烦了...
需要用this.$emit("hide")触发hide事件，然后在组件上@hide="showDialog"监听hide事件，再然后触发父组件的showDialog方法
如果选项有两个，就要把上面的步骤再重复一次

完全超出了我的预计，本来想复用，但是用一次写这么一大堆东西怎么复用呢...

所以还是另找办法吧OTL

方法二

代码如下




    
    Document

后来，发现居然还有这个东西！！

尽管有 props 和 events ，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID 。

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例

以上来自官网

this.$refs.modal

居然能够直接访问子组件！那直接在子组件处理一切不就好了啊！

点击触发dialog的函数就可以像是这样

this.$refs.modal.show(function(){
    console.log("yes");//这是选择yes的回调函数
},function(){
    console.log("no");//这是选择no的回调函数
});

剩下的东西子组件自己解决！

hide:function(){
    this.isShow = false;
},
show:function(yescb,nocb){
    this.isShow = true;
    this.yescb = yescb;
    this.nocb = nocb;
},
yes:function(){
    this.yescb();
},
no:function(){
    this.nocb();
}

还很不完善，希望各位能给点建议OTL

PS：这个自用的comfirm为了在引入的时候少写东西，我就尽量吧css写到元素里了...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82058.html

vue插件开发练习--实用弹窗

摘要：前言上回说了组件组件开发练习焦点图切换的一个练习项目，这次换下口味，说下的插件练手的项目。和组件开发的目录相比，区别就在于这个文件夹上。开发过程把项目跑起来首先，先弄这个组件。最后还需要一个变量，控制弹窗是否显示。 1.前言上回说了组件（vue组件开发练习--焦点图切换）的一个练习项目，这次换下口味，说下vue的插件练手的项目。相对于现在之前的焦点图切换的组件，这个可能就更简单了，基...

muzhuyu 2019-08-22 11:06 评论0 收藏0
在Vue项目中使用ElementUI(一)

摘要：这是一段内容标题名称确定点击确定后的回调函数确认消息弹框提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。。初始化一个Vue项目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

linkin 2019-08-02 15:27 评论0 收藏0
在Vue项目中使用ElementUI(一)

摘要：这是一段内容标题名称确定点击确定后的回调函数确认消息弹框提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。。初始化一个Vue项目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

shadowbook 2019-08-23 18:27 评论0 收藏0
在Vue项目中使用ElementUI(一)

摘要：这是一段内容标题名称确定点击确定后的回调函数确认消息弹框提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。。初始化一个Vue项目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

NicolasHe 2019-08-30 11:18 评论0 收藏0