要点:
- 用v-on click 实现弹窗,类似Semantic UI 当中的http://semantic-ui.com/modules/modal.html#/definition Modeal功能,这里要用到v-on click后面接函数的用法,以及Vue中的methods表达方法。
- 弹窗功能需要实现这个逻辑,即两个触发:
- 点击一个按钮,弹框出来
- 点击另外一个地方,弹框消失
- 与弹窗需要触发对应的一个功能是,私密的博客,需要输入密码才能看见,在一开始就要运行(如刷新这个操作),而不是点击触发才去运行。这里涉及到一个基础知识,Vue中的ready,页面加载好马上做某事情。
一 基础知识
二 代码实战
先在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"