当点击播放时 整个页面只实例化一个 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