<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)]" v-tip="getTip(m.id)"> {{ m.name }} </span> </div>
Vue.use(Vtip.directive) // 音乐列表(尼尔机械纪元的音乐超喜欢 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: { getTip (id) { return { width: 'auto', // theme: 'dark', transition: true, // 优先在 top bottom 方向上显示 placements: ['top', 'bottom'], // customProps 对应 Music 组件上的 props customProps: { id }, customComponent: Music } } } })
@import url("//unpkg.com/[email protected]/lib/index.min.css"); * { padding: 0; margin: 0; } html, body, #app { width: 100%; height: 100%; font-size: 12px; } #app { position: relative; } .link { color: #55b559; padding: 8px 10px; position: absolute; margin: 20px 10px; } .b1 { top: 0; left: 0; } .b2 { top: 0; right: 0; } .b3 { bottom: 0; left: 0; } .b4 { bottom: 0; right: 0; } .b5 { top: 30%; left: 50%; transform: translate(-50%, -50%); } .b6 { top: 50%; left: 50%; transform: translate(-50%, -50%); } .b7 { top: 70%; left: 50%; transform: translate(-50%, -50%); }