Pro*_*oke 3 javascript jquery angularjs vue.js
我目前正在研究工作中使用Vue.JS.
目前我主要从事前端方面的工作.我有一个包含几个条目的表,并且在单击该行时,我想要一个模态弹出窗口以显示该行的更多详细信息.
我只是想让多个弹出窗口正常工作,并且一旦正常工作,它将处理每个弹出窗口中的动态内容.
目前,第一行的工作方式如下所示:
<tr class="activate-popupmodal-tr" @click="showmodal = true">
<td>01/01/2016
<modal :show.sync="showmodal">
<h3 slot="header">
Bug #1 - <span> 04/07/2016 </span>
<img src="files/cross.jpg" @click="showmodal = false" />
</h3>
<div slot="body">
</div>
<div slot="footer">
</div>
</modal>
</tr>
使用app.js:
Vue.component('modal', {
template: '#dashboard-popup-template',
props: {
show: {
type: Boolean,
required: true,
twoWay: true
}
}
})
new Vue({
el: '.activate-popupmodal-tr',
data: {
showmodal: false
}
})
这有效,但只在一行.关于如何让它工作的任何想法？
Vue非常灵活,因此您可以通过多种不同的方式显示模态.这是我经常使用的方法之一.
可以在webpackbin上找到一个工作演示(包括一些丑陋的样式).
首先,我从一个父vue实例开始,该实例将保存我的列表组件,模态组件和我的项目列表(实际上在这种情况下,项目列表可以存储在父组件或列表组件中,但可能是你'我希望它在父母中):
// in main.js
new Vue({
el: 'body',
components:{
list: List,
modal: Modal
},
data:{
items:[
{name: 'foo'},
{name: 'bar'},
{name: 'baz'}
]
},
events:{
showModal: function(item){
this.$broadcast('showModal', item)
}
}
})
它还包含一个桥接事件,即一个事件,其目的是监听$dispatch来自子组件的ed事件,并立即$broadcasts将相应的事件发送到不同的子组件,并在需要时传递数据.我们稍后会详细介绍这一点.
我的索引文件将包含将被每个相应组件的模板替换的list和modal组件的占位符:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
...
</style>
</head>
<body>
<div class="list-container">
<list :items="items"></list>
</div>
<modal></modal>
<script src="main.js"></script>
</body>
</html>
注意这一行<list :items="items"></list>.这里我们items将父组件传递给list组件.
然后我创建我的列表组件,将显示我的列表:
// also in main.js
var List = Vue.component('list',{
props:['items'],
template: `
<div class="list-row" v-for="item in items" @click="showModal(item)">
<span>{{ item.name }}</span>
</div>
`,
methods:{
showModal: function(item){
this.$dispatch('showModal', item)
}
}
})
列表组件将items属性作为属性,以便它可以v-for="item in items"在列表组件的模板中显示每个项目.
对于在列表中呈现的每一行,我附加一个调用该方法的click事件showModal并将当前值传递item给它.然后该方法将showModal事件调度到父级.
这是父母的桥接事件进入的地方.父母的showModal事件从列表中听到调度,并立即showModal向所有孩子广播一个事件,并将当前项目随之传递.
唯一具有事件侦听showModal器的子modal组件是:
// also in main.js
var Modal = Vue.component('modal',{
template:`
<div class="modal-container" v-show="visible">
<div class="modal-body">
<div clas="modal-content">
{{ item | json }}
</div>
<button @click="closeModal">Close</button>
</div>
</div>
`,
data: function(){
return {
item: null,
visible: false
}
},
events:{
showModal: function(item){
this.item = item
this.visible = true
}
},
methods:{
closeModal: function(){
this.visible = false
this.item = null
}
}
})
当模态组件检测到showModal已经从父节点向下广播时,它会触发它的showModal事件逻辑,该事件逻辑将传入的项目设置为本地prop(它给模态的模板访问它)并将可见性设置为true.
我做这种模式来显示模态,加载蒙版,通知等.
如果您对此方法有任何疑问,请与我们联系.
| 归档时间： |
|
| 查看次数： |
5321 次 |
| 最近记录： |