用vue封裝視頻預覽組件（手機端）

最近寫手機打開的h5頁面時，有視頻預覽的需求，於是封裝了一個小組件。

組件目錄如下：

1.首先，showVideo.vue

<template>
    <div class="video-box" v-if="videoFlag">
        <span class="close-btn" @click="close"></span>
        <video :src="urlString" autoplay="true" controls="controls">
            您的瀏覽器不支持 video 標簽。
        </video>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
    }
</script>
<style lang="stylus" scoped>
    .video-box
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        z-index 10
        .close-btn
            position absolute
            top .45rem
            left 0
            z-index 11
            display inline-block
            width 2.4rem
            height 2.4rem
            background url('../../assets/images/close_icon.png') center center no-repeat
            background-size contain
        video
            max-width 100%
            max-height 100%
</style>

注：close_icon.png是關閉的圖片，按需替換即可。

2.接着是index.js

import Vue from 'vue'
import vid from './showVideo'

const videoExtend = Vue.extend(vid)

const video = (url) => {
    const videoInstance = new videoExtend({
        data: {
            urlString: url, // 視頻鏈接地址
            videoFlag: false
        },
        created() {
            if (url) this.videoFlag = true
        },
        methods: {
            close() {
                this.videoFlag = false
            }
        }
    })
    videoInstance.vm = videoInstance.$mount()
    videoInstance.dom = videoInstance.vm.$el
    document.body.appendChild(videoInstance.dom) // 將dom插入body
}
export default {
    install: Vue => {
        Vue.prototype.$videoPreview = video
    }
}

3.在main.js入口文件中導入

import videoPreview from '@/components/videoPreview/index.js'
Vue.use(videoPreview)

4.使用

methods: {
    // 視頻預覽
    openVideo(url) {
        this.$videoPreview(url)
    }
}

 5.效果（全屏展示）