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

最新推荐文章于 2024-08-28 08:00:00 发布

weixin_34334744

最新推荐文章于 2024-08-28 08:00:00 发布

阅读量158

点赞数

文章标签： javascript ui ViewUI

原文链接：https://segmentfault.com/a/1190000008721329

版权

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

方法一

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mdtransition-enter-active,
        .mdtransition-leave-active {
            transition: all 0.8s;
        }

        .mdtransition-enter,
        .mdtransition-leave-active {
            opacity: 0;
        }

    </style>
</head>
<body>
    <div id="example">
        <pop-up :ishow="isShow" @hide="showDialog" @del="del" style="position:absolute;"></pop-up>
        <button @click="showDialog">show  del !</button>
    </div>
    <script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>
    <script>
        var popUpComponent = Vue.component('pop-up', {
            props: ['ishow'],
            template: `
            <transition appear
            name="mdtransition"
            >
                <div style="
                height:100vh;
                width:100vw;
                background-color:rgba(0,0,0,0.3);
                display: flex;
                justify-content:center;
                align-items:center;
                "
                @click="hide"
                v-if="ishow"
                >
                    <div style="
                    background-color:#fff;
                    padding:10px;
                    "
                    @click="del"
                    >Are you sure to delete this item?</div>
                </div>
            </transition>
            `,
            data:function(){
                return {
                }
            },
            methods:{
                hide:function(){
                    this.$emit('hide');
                },
                del:function(){
                    this.$emit('del');
                }
            }
        })

        var vm = new Vue({
            el: '#example',
            data:{
                isShow:false
            },
            methods:{
                showDialog:function(){
                    this.isShow = !this.isShow;
                },
                del:function(){
                    console.log('del');
                }
            }
        })


    </script>
</body>
</html>

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

<pop-up :ishow="isShow"></pop-up>

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

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

以上来自官网

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

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

所以还是另找办法吧OTL

方法二

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;padding: 0;
        }
        .mdtransition-enter-active,
        .mdtransition-leave-active {
            transition: all 0.8s;
        }

        .mdtransition-enter,
        .mdtransition-leave-active {
            opacity: 0;
        }

    </style>
</head>
<body>
    <div id="example">
        <modal ref="modal" style="position:absolute;" word="Yes Or No?"></modal>
        <button @click="showDialog">show  del !</button>
    </div>
    <script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>
    <script>
        Vue.component('modal', {
            template: `
            <transition appear
            name="mdtransition"
            >
                <div style="
                height:100vh;
                width:100vw;
                background-color:rgba(0,0,0,0.3);
                display: flex;
                justify-content:center;
                align-items:center;
                flex-direction: column;
                "
                @click="hide"
                v-if="isShow"
                >
                    <div style="
                    background-color:#fff;
                    padding:10px;
                    "
                    >
                        <p>{{ word }}</p>
                        <div style="
                        display: flex;
                        justify-content:Space-around;
                        ">
                            <button @click="yes">Y</button>
                            <button @click="no">N</button>
                        </div>
                    </div>
                </div>
            </transition>
            `,
            props:['word'],
            data:function(){
                return {
                    isShow:false,
                    yescb:'',
                    nocb:''
                }
            },
            methods:{
                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();
                }
            }
        })

        var vm = new Vue({
            el: '#example',
            methods:{
                showDialog:function(){
                    this.$refs.modal.show(function(){
                        console.log('yes');
                    },function(){
                        console.log('no');
                    });
                }
            }
        })
    </script>
</body>
</html>

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

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

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

以上来自官网

<modal ref="modal"></modal>

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写到元素里了...

weixin_34334744

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫