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怎么实现弹窗列表的详细内容，更多请关注其它相关文章！

lynch永久会员

打赏 收藏 海报 链接