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

时间 2019-12-27

标签尝试一个 vue.js vue comfirm 对话框 component 栏目 JavaScript 繁體版

原文原文链接

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

方法一

代码以下html

<!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——ishowvue

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

这样作咱们能够很容易在父组件经过改变isShow从而让dialog显示
可是怎么让dialog消失？web

组件实例的做用域是孤立的。这意味着不能(也不该该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，咱们须要经过子组件的props选项。浏览器

以上来自官网app

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

彻底超出了个人预计，原本想复用，可是用一次写这么一大堆东西怎么复用呢...函数

因此仍是另找办法吧OTLflex

方法二

代码以下ui

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