開發十年，就只剩下這套架構體系了！ >>>   

當點選播放時 整個頁面只例項化一個 video 播放視訊   使用vue.extend 動態建立

 

建立外掛

winplay.vue

<template>
    <div class="winplay">
         <button @click.stop="onClick">點選</button>
    </div>
</template>

<script>
    export default {
        name: "winplay",

        data(){
            return {

            }
        },
        mounted(){
          console.log("winplay"+this.url)
        },
        methods:{
            play(url){
                console.log(url)
            },
            onClick(){
                console.log("click");
            }
        }
    }
</script>

<style scoped>
.winplay{
    background: #ccc;
    z-index: 1000;
}
</style>

play.js

import winplay from './winplay'
import Vue from 'vue'
let winplayComponent = Vue.extend(winplay); //將元件加入構造器

var vm=null;
export default {
    install(Vue) {
        Object.defineProperty(Vue.prototype, "$showPlay", {
            get() {
                return function (od, url) {
                    if(vm){
                        vm.$el.remove() //移除節點


                    }
                    vm = new winplayComponent({
                        //     data() {  data也可以直接覆蓋元件的data
                        //         return {
                        //             url:url
                        //         }
                        //     }
                        }
                    ).$mount(document.createElement('div'));
                    vm.play(url); //傳遞url
                    console.log(vm);
                    od.appendChild(vm.$el)
                }
            },
        })
    }
}
 

在main.js掛載外掛

import Vue from 'vue'
import App from './App.vue'
import 'flex.css'
import play from  './plugin/play.js'
Vue.config.productionTip = false
Vue.use(play)

new Vue({
  render: h => h(App),
}).$mount('#app')

在頁面使用播放

<template>
  <div class="index">
        <div class="moves-list" flex="dir:top">
            <div class="moves-list-item" flex="dir:top" v-for="(i,t) of 100">
                <div class="moves-list-item-cover" @click="paly(t)" ref="move" style="background: url('/jq.jpg') no-repeat center;background-size:cover;">
                </div>
                <div class="moves-list-item-option" flex="dir:left">
                    <div class="moves-list-item-option-title" flex-box="2" flex="cross:center ">
                            <p>驚奇隊長 高清 1080P 線上播放</p>
                    </div>
                    <div class="moves-list-item-option-ico" flex-box="1"  flex="cross:center main:right">
                         <a href="#">分享</a>
                    </div>
                </div>
            </div>

        </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
    props: {
    msg: String
  },
    data(){
      return{

      }
    },
    methods:{
        paly(i){
            
          this.$showPlay(this.$refs.move[i],i); //動態呼叫視訊播放元件
        }
    }
}
</script>

在頁面只會有一個播放video 

相關推薦