vue.js dynamic create nest modal

头像
Chobits
    阅读 7 分钟
    <!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.0

    <!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>
    modalvue.js
    Chobits
    7.4k 声望171 粉丝

    保卫骡博 Chobits#3780

    « 上一篇
    vue-validator demo
    下一篇 »
    angularjs 高德地图 选取坐标 bootstrap modal

    引用和评论

    被 2 篇内容引用
    推荐阅读
    头像
    linux上更新nginx证书

    Chobits阅读 958

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 494评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 892

    0 条评论
    得票最新