最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么实现弹窗列表

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js实现弹窗列表的方法:

    先在style标签后面写一个黑色遮罩,并做第一个触发,出现弹窗之后,点击背景,弹窗消失。

    说明:

    • 其中的v-if="!model.show"是为了配合刷新即现实订阅弹窗而写的代码。

    • 要想调用,如fadeIn,需要在semantic UI的基础上加一个<link rel="stylesheet" href="css/animate.css" media="screen" title="no title">(可以去animate.css这个网址找到你想要的动画效果。)

            <div class="ui dimmer fadeIn active" v-if="!modal.show" v-on:click="modalSwitch">
                <div class="ui modal active">
                    <h3 class="ui header">This is a header!</h3>
                </div>
            </div>

    然后在Vue中添加一个modal的对象和modalSwitch的函数。

            <script>
                var vm = new Vue({
                    el:"#app",
                    // context
                    data:{
                        modal:{
                            show:true,
                        },
                        
                        article:{
                            title:"This is a title",
                            content:"Hi there!",
                            fontSize:18
                        },
                        comments:[
                            {name:"John Doe",said:"Great!",show:true},
                            {name:"John Doe",said:"Great!",show:true},
                            {name:"John Doe",said:"Great!",show:true},
                            {name:"John Doe",said:"Great!",show:true},
                        ]
                    },
                    methods:{
                        modalSwitch:function () {
                            this.modal.show = !this.modal.show  # this 是JS一个需要注意的东西,python这实例化有一个self,与此类似。
                        }
                    },
                    ready:function () {
                        this.modalSwitch()
                    }
                })
            </script>

    做第二个触发,在文章后面条件一个关注订阅的按钮:

    <button v-on:click="modalSwitch" class="ui inverted blue button"

    以上就是vue.js怎么实现弹窗列表的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么实现弹窗列表
    • 257会员总数(位)
    • 5897资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 539稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情