TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
v-for 循環(huán) slots 的每一條信息，
例如:
<template>
<div id="first">
<p>我是第一個(gè){{msg}}</p>
<mt-button @click.native="handleClick">按鈕</mt-button>
<mt-popup v-model="popupVisible" position="bottom">
<div v-for="it in slots">
<span v-text="it.flex"></span>
</div>
</mt-popup>
</div>
</template>
<script>
export default {
data () {
return {
msg:'組件',
popupVisible:false,
slots: [
{
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot1',
textAlign: 'right'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot3',
textAlign: 'left'
}
]
}
},
methods: {
handleClick: function() {
this.popupVisible = true
}
}
}
</script>
<style>
</style>
這樣就能循環(huán)出每一條數(shù)據(jù)了，加點(diǎn)樣式美化一下，你就能得到你想要的。
官網(wǎng)文檔給的是一個(gè)空白頁，意思是里面的東西隨你自己填，只要放到組件里面，就能通過相關(guān)的觸發(fā)事件去調(diào)出這個(gè)popup框。
舉報(bào)