vue.js dynamic create nest modal

時間 2019-11-06

標籤 vue.js vue dynamic create nest modal 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class='container' id="demo">
        <p>{{txt}}</p>
        <button @click="show()" class="btn btn-default">show modal</button>
    </div>

    <template id="template">
        <modal :show.sync="show">
            <div slot="modal-header" class="modal-header">
                <h4 class="modal-title">deep: {{deep}}</h4>
            </div>
            <div slot="modal-body" class="modal-body">
                <input type="text" v-model="txt" />
                <button @click="showNew">show new</button>
            </div>
            <div slot="modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" @click='cancel()'>Exit</button>
                <button type="button" class="btn btn-success" @click='submit()'>Save</button>
            </div>
        </modal>
    </template>

    <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
    <script src="http://cdn.bootcss.com/vue-strap/1.0.9/vue-strap.min.js"></script>

    <script type="text/javascript">
        'use strict'

        function creat_new_modal(txt, deep) {

            var promise = new Promise(function (resolve, reject) {

                var MyModal = Vue.extend({});

                var modal = new MyModal({
                    ready: function () {
                        this.$watch('show', function (val) {
                            if (val === false) {
                                modal.$destroy(true)
                            }
                        })
                    },
                    data: {
                        show: true,
                        txt: txt,
                        deep: deep || 0,
                    },
                    template: '#template',
                    methods: {
                        showNew: function () {
                            var self = this

                            creat_new_modal(this.txt, this.deep + 1).then(function (value) {
                                self.txt = value
                            }, function (error) {
                                console.log(error)
                            })
                        },
                        submit: function () {
                            resolve(this.txt)
                            this.show = false
                        },
                        cancel: function () {
                            reject('cancel')
                            this.show = false
                        }
                    },
                    components: {
                        modal: VueStrap.modal
                    }
                })

                modal.$mount().$appendTo('body')
            })
            return promise
        }

        var vm = new Vue({
            el: '#demo',
            data: function () {
                return {
                    txt: null,
                }
            },
            methods: {
                show: function () {
                    var self = this

                    creat_new_modal(self.txt).then(function (value) {
                        self.txt = value
                    }, function (error) {
                        console.log(error)
                    })
                }
            }
        })
    </script>
</body>
</html>

2.0javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class='container' id="demo">
        <p>{{ txt }}</p>
        <button @click="show()" class="btn btn-default">show modal</button>
    </div>

    <template id="template">
        <div role="dialog" class="modal" :style="{ display: show ? 'block' : 'none' }">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div slot="modal-header" class="modal-header">
                        <h4 class="modal-title">deep: {{deep}}</h4>
                    </div>
                    <div slot="modal-body" class="modal-body">
                        <input type="text" v-model="txt" />
                        <button @click="showNew">show new</button>
                    </div>
                    <div slot="modal-footer" class="modal-footer">
                        <button type="button" class="btn btn-default" @click='cancel()'>Exit</button>
                        <button type="button" class="btn btn-success" @click='submit()'>Save</button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>

    <script type="text/javascript">
        'use strict'

        function creat_new_modal(txt, deep) {

            var promise = new Promise(function (resolve, reject) {

                var MyModal = Vue.extend({})

                var modal = new MyModal({
                    data: {
                        show: true,
                        txt: txt,
                        deep: deep || 0,
                    },
                    template: '#template',
                    methods: {
                        showNew: function () {
                            var self = this

                            creat_new_modal(this.txt, this.deep + 1).then(function (value) {
                                self.txt = value
                            }, function (error) {
                                console.log(error)
                            })
                        },
                        submit: function () {
                            resolve(this.txt)
                            this.show = false
                        },
                        cancel: function () {
                            reject('cancel')
                            this.show = false
                        }
                    },
                    watch: {
                        'show': function (val) {
                            if (val === false) {
                                this.$destroy()
                                document.getElementById('demo').removeChild(this.$el)
                            }
                        }
                    }
                })

                // 或者，在文檔以外渲染而且隨後掛載
                var component = modal.$mount()
                document.getElementById('demo').appendChild(component.$el)
            })
            return promise
        }

        var vm = new Vue({
            el: '#demo',
            data: function () {
                return {
                    txt: null,
                }
            },
            methods: {
                show: function () {
                    var self = this

                    creat_new_modal(self.txt).then(function (value) {
                        self.txt = value
                    }, function (error) {
                        console.log(error)
                    })
                }
            }
        })
    </script>
</body>
</html>

相關標籤/搜索

每日一句

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