Vue.prototype.$tip = Vtip.tip // 音乐列表(尼尔机械纪元的音乐超喜欢 O(∩_∩)O~~) var MUSICS_DATA = [ { name: '遺サレタ場所/遮光', id: '468490579' }, { name: '遺サレタ場所/斜光', id: '468490564' }, { name: '愚カシイ兵器:乙:甲', id: '468490586' }, { name: '意味/無', id: '468490563' }, { name: 'Weight of the World (Nouveau-FR Version)', id: '468490607' }, { name: 'Weight of the World/the End of YoRHa', id: '468490608' }, { name: '穏ヤカナ眠リ', id: '468490565' } ] // 音乐播放器组件 var Music = { template: ` <div :style="{ width: '330px', height: '86px' }"> <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 :src="link"> </iframe> </div>`, props: { id: String }, computed: { link () { return `//music.163.com/outchain/player?type=2&id=${this.id}&auto=1&height=66` } } } new Vue({ el: '#app', data () { this.MUSICS_DATA = MUSICS_DATA return {} }, methods: { // 工具函数使用 setTip ({ target }, id) { this.tipInstance = this.$tip({ target, width: 'auto', transition: true, customProps: { id }, customComponent: Music }) }, hiddenTip ({ target }) { const { tipInstance } = this if (tipInstance && tipInstance.target === target) { tipInstance.hiddenTip() } } } })
<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/[email protected]/lib/index.umd.min.js"></script> <div id="app"> <span v-for="(m, index) in MUSICS_DATA" :key="m.id" class="link" :class="['b' + (index + 1)]" @click="setTip($event, m.id)" @mouseleave="hiddenTip"> {{ m.name }} </span> </div>