嘗試寫一個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寫到元素裏了...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。