記錄使用Vue過程當中的各類插件及教程(不定時更新)

本文爲整理記錄本人從18年初開始上手使用Vue之後,針對項目中業務需求所用到的各類插件及教程整理😁。

目前市場上經常使用的三大Vue桌面端UI組件庫:Element、iView、Ant Design Vue,內置的組件,基本能知足大部分項目所需的業務功能需求。css

如下爲經常使用業務功能需求、插件及教程整理(包含全家桶):html

一、axios - 簡書。連接:http://www.jianshu.com/p/df46...
二、vue中axios的封裝 - 火星黑洞 - 博客園。連接:https://www.cnblogs.com/ldlx-...
三、理解vuex -- vue的狀態管理模式 - 我的文章 - SegmentFault 思否。連接:https://segmentfault.com/a/11...
四、vuex最簡單、最詳細的入門文檔 - 前端研發工程師 - 梁曉誼 - SegmentFault 思否。連接:https://segmentfault.com/a/11...
五、Vuex,從入門到入門。連接:https://zhuanlan.zhihu.com/p/...
六、Vue:在Vue中使用echarts - 簡書。連接:https://www.jianshu.com/p/799...
七、作一個具備異步加載特性的 echarts-vue 組件 - DB.Reid - SegmentFault 思否。連接:https://segmentfault.com/a/11...
八、作一個可複用的 echarts-vue 組件(延遲動畫加載) - 簡書。連接:https://www.jianshu.com/p/222...
九、vue+mockjs 模擬數據,實現先後端分離開發 - Jason齊齊 - 博客園。連接:https://www.cnblogs.com/jason...
十、Vue使用less - CSDN博客。連接:https://blog.csdn.net/qq_3574...
十一、Vue中如何定義全局函數 - CSDN博客。連接:https://blog.csdn.net/sinat_1...
十二、vue.js - vue項目如何引入babel-polyfill - SegmentFault 思否。連接:https://segmentfault.com/q/10...
1三、另闢蹊徑:vue單頁面,多路由,前進刷新,後退不刷新 - 冰揚 - SegmentFault 思否。連接:https://segmentfault.com/a/11...
1四、Vue.js中 watch 的高級用法 - CSDN博客。連接:https://blog.csdn.net/wandoum...
1五、vue.js如何獲取自定義元素屬性參數值<div data-link="123">? - 知乎。連接:https://www.zhihu.com/questio...
1六、vue編程式路由實現新窗口打開 - 逍遙雲天 - 博客園。連接:https://www.cnblogs.com/xyyt/...
1七、vue-i18n ,vue項目中如何實現國際化 - CSDN博客。連接:https://blog.csdn.net/DOCALLE...
1八、Vue 後臺管理控制用戶權限的解決方案? - 知乎。連接:https://www.zhihu.com/questio...
1九、用addRoutes實現動態路由 | 前端路上。連接:https://refined-x.com/2017/09...
20、Vue 脫坑記 - 查漏補缺(彙總下羣裏高頻詢問的xxx及給出不靠譜的解決方案) - 掘金。連接:https://juejin.im/post/59fa92...
2一、2018 vue前端面試題 - 實現豐盛 - 博客園。連接:https://www.cnblogs.com/sicha...
2二、處理 Vue 單頁面 Meta SEO的另外一種思路。連接:https://zhuanlan.zhihu.com/p/...
2三、關於vue項目的seo問題 - CSDN博客。連接:https://blog.csdn.net/codeliu...
2四、Vue響應式原理源碼淺析 - 掘金。連接:https://juejin.im/post/59f2cf...前端


如下爲第三方插件及教程整理:vue

一、vue-lazyload - 圖片懶加載 - npm。連接:https://www.npmjs.com/package...
二、Moment.js - 日期格式化 中文網。連接:http://momentjs.cn/
三、Vue- 中國省市區三級聯動。連接:https://github.com/dwqs/vue-a...
四、vue-photo-preview - 全屏圖片預覽 - npm。連接:https://www.npmjs.com/package...
五、vue-ripple-directive——點擊水波紋。連接:https://www.npmjs.com/package...
六、qrcode.vue - 生成二維碼圖片 - npm。連接:https://www.npmjs.com/package...
七、clipboard - 實現複製文本到剪貼板功能 - npm。連接:https://www.npmjs.com/package...
八、vue 使用clipboard實現複製功能 - CSDN博客。連接:https://blog.csdn.net/guxuehu...
九、vue-count-to——數字跳動動畫。連接:http://panjiachen.github.io/c...
十、NProgress - 全站頂部loading進度條插件。連接:http://ricostacruz.com/nprogr...
十一、vue-fullpage.js - 全屏滾動插件 - npm。連接:https://www.npmjs.com/package...
十二、介紹 · better-scroll - 滾動插件。連接:http://ustbhuangyi.github.io/...
1三、BetterScroll:多是目前最好用的移動端滾動插件 - 掘金。連接:https://juejin.im/post/59b777...
1四、Vue導出頁面爲PDF格式 - CSDN博客。連接:https://blog.csdn.net/pratise...
1五、vue的無縫滾動組件。連接:https://github.com/chenxuan00...
1六、vue相關的開源項目 - CSDN博客。連接:https://blog.csdn.net/aaa333q...
1七、video插件:https://surmon-china.github.i...
如下爲video.js實現的公共組件videoPlayer.vue:ios

<template>
    <section class="video-player-box">
        <!--video-player標籤的class必須設置成「video-player vjs-custom-skin」,引入的樣式才能起做用。-->
        <video-player class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @ended="onPlayerEnded($event)"
            @loadeddata="onPlayerLoadeddata($event)"
            @waiting="onPlayerWaiting($event)"
            @playing="onPlayerPlaying($event)"
            @timeupdate="onPlayerTimeupdate($event)"
            @canplay="onPlayerCanplay($event)"
            @canplaythrough="onPlayerCanplaythrough($event)"
            @ready="playerReadied"
            @statechanged="playerStateChanged($event)">
        </video-player>
    </section>
</template>

<script>
    require('video.js/dist/video-js.css');
    require('vue-video-player/src/custom-theme.css');
    import { videoPlayer } from 'vue-video-player';
    
    export default {
        props: {
            //播放視頻的URL
            videoURL: {
                type: String,
                default: ''
            },
            //在視頻開始播放以前顯示的圖像的URL
            posterURL: {
                type: String,
                default: ''
            },
            //是否暫停播放
            isPause: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                playerOptions : {
                    width: document.documentElement.clientWidth,//設置視頻播放器的顯示寬度(以像素爲單位)
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放快進速度
                    autoplay: false, //自動播放視頻
                    muted: false, // 關閉視頻的聲音通道(靜音)。
                    loop: false, // 循環播放。
                    // 向瀏覽器建議在<video>加載元素後視頻數據是否應該開始下載。支持的值是:
                    // 'auto':當即開始加載視頻(若是瀏覽器支持)。某些移動設備不會預加載視頻以保護其用戶的帶寬/數據使用,這每每是最多見和推薦的值,由於它容許瀏覽器選擇最佳行爲。
                    // 'metadata':僅加載視頻的元數據,其中包括視頻的持續時間和尺寸等信息。有時,元數據將經過下載幾幀視頻來加載。
                    // 'none':不要預加載任何數據。瀏覽器將等待用戶點擊「播放」開始下載。
                    preload: 'none',
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 將播放器置於流體模式,並在計算播放器的動態大小時使用該值。該值應表示比率 - 由冒號(例如"16:9"或"4:3")分隔的兩個數字。
                    fluid: true, // 當true時,Video.js player將擁有流體大小。換句話說,它將按比例縮放以適應其容器。
                    sources: [{
                        type: 'video/mp4',
                        src: 'https://imf-video-export.oss-cn-hangzhou.aliyuncs.com/video/d6f51f1f-6e49-4685-9256-758066b39f11.mp4' //要嵌入的視頻源的源URL,必填項,缺失此屬性會形成播放時底部controlBar控件都不工做
                    }],
                    playsinline: true,//支持小窗內聯播放,IOS手機上的小窗口播放,安卓微信瀏覽器是X5內核,此屬性不支持
                    // 視頻格式測試:
                    // type: "video/webm", // ok,用ogg也可打開
                    // type: "video/ogg", // ok,用webm也可打開
                    // type: "video/3gp", //ok
                    // type: "video/mp4", // ok
                    // type: "video/avi", //打不開
                    // type: "video/flv", // 打不開
                    // type: "video/mkv", // 打不開
                    // type: "video/mov", // 打不開
                    // type: "video/mpg", // 打不開
                    // type: "video/swf", // 打不開
                    // type: "video/ts", // 打不開
                    // type: "video/wmv", // 打不開
                    // type: "video/vob", // 沒轉化
                    // type: "video/mxf", // 轉化出錯
                    // type: "video/rm", // 轉化出錯
                    poster: this.posterURL, //在視頻開始播放以前顯示的圖像的URL。這一般是視頻的一個框架或自定義標題屏幕。一旦用戶點擊「播放」,圖像就會消失。
                    notSupportedMessage: '此視頻暫沒法播放,請稍後再試!', //容許覆蓋Video.js沒法播放媒體源時顯示的默認消息
                    controlBar: {
                        timeDivider: true,//當前時間和持續時間之間的分隔符。若是在設計中不須要,能夠隱藏。
                        durationDisplay: true,//顯示時間
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按鈕
                    }
                },

            }
        },
        computed: {
            player () {
                return this.$refs.videoPlayer.player
            }
        },
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        methods: {
            //監聽播放
            onPlayerPlay (player) {
                console.log(player);
                // this.$refs.videoPlayer.player.play();
            },
            //監聽暫停
            onPlayerPause (player) {
                console.log(player);
                // this.$refs.videoPlayer.player.pause();
            },
            //監聽播放狀態改變
            playerStateChanged (player) {
                // console.log(player);
            },
            //監聽媒體是否已到達結尾,播放完
            onPlayerEnded (player) {
                // console.log(player);
            },
            //DOM元素上的readyState更改致使播放中止。
            onPlayerWaiting (player) {
                // console.log(player);
            },
            //媒體再也不被禁止播放,而且已開始播放。
            onPlayerPlaying (player) {
                // console.log(player);
            },
            //當播放器在當前播放位置下載數據時觸發
            onPlayerLoadeddata (player) {
                // console.log(player);
            },
            //當前播放位置發生變化時觸發。
            onPlayerTimeupdate (player) {
                // console.log(player);
            },
            //媒體的readyState爲HAVE_FUTURE_DATA或更高
            onPlayerCanplay(player) {
                // console.log('player Canplay!', player)
            },
            //媒體的readyState爲HAVE_ENOUGH_DATA或更高。這意味着能夠在不緩衝的狀況下播放整個媒體文件。
            onPlayerCanplaythrough(player) {
                // console.log('player Canplaythrough!', player)
            },
            //將偵聽器綁定到組件的就緒狀態。與事件監聽器的不一樣之處在於,若是ready事件已經發生,它將當即觸發該函數。。
            playerReadied(player) {
                // seek to 10s
                console.log('example player 1 readied', player);
                // player.currentTime(0)
                // console.log('example 01: the player is readied', player)
            }


        },
        watch: {
            //更改視頻URL
            videoURL(val) {
                if(val !== ''){
                    this.$refs.videoPlayer.player.src(val);
                }
            },
            //在視頻開始播放以前顯示的圖像的URL
            posterURL(val) {
                if(val !== ''){
                    this.$refs.videoPlayer.player.poster(val);
                }
            },
            //是否暫停播放
            isPause(val) {
                console.log('isPause', val);
                if(val){
                    this.$refs.videoPlayer.player.pause();
                }
            },

        },
        components: {
            videoPlayer
        }
    }
</script>

<style lang="less" type="text/less">
    //修改播放按鈕的樣式
    .video-player-box{
        .video-js{
            .vjs-big-play-button{
                width: 2em;
                height: 2em;
                line-height: 2em;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                border-radius: 50%;
                margin: 0 !important;
                margin-top: 0 !important;
            }
        }
    }
</style>

大概就是這些配置便可完成基本的播放、暫停、視頻列表切換播放(切換視頻的邏輯在父組件寫)等功能。可是移動端頁面在微信瀏覽器打開會有個問題,點擊視頻播放按鈕會默認全屏而且黑屏,video標籤不能設置這兩個屬性,x5-video-player-type='h5' x5-video-player-fullscreen='true',或者設置爲空便可。可是video.js插件的官方文檔沒找到相關的option屬性配置,因此後來放棄了這個插件,改成使用原生video標籤來實現需求,可參考:git

<template>
    <section class="video-player-box">
        //controlsList="nodownload" 此屬性是取消瀏覽器原生video標籤的下載功能。
        <video width="100%" ref="videoPlayer" controls controlsList="nodownload" playsinline="playsinline" webkit-playsinline="true" preload="none" :src="videoURL" :poster="posterURL"></video>
    </section>
</template>

<script>
    export default {
        props: {
            //播放視頻的URL
            videoURL: {
                type: String,
                default: ''
            },
            //在視頻開始播放以前顯示的圖像的URL
            posterURL: {
                type: String,
                default: ''
            },
            //是否暫停播放
            isPause: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
            }
        },
        computed: {
        },
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        methods: {
        },
        watch: {
            //更改視頻URL
            videoURL(val) {
                if(val !== ''){
                    this.$refs.videoPlayer.src = val;
                }
            },
            //在視頻開始播放以前顯示的圖像的URL
            posterURL(val) {
                if(val !== ''){
                    this.$refs.videoPlayer.poster = val;
                }
            },
            //是否暫停播放
            isPause(val) {
                if(val){
                    this.$refs.videoPlayer.pause();
                }
            },

        },
        components: {
        }
    }
</script>

<style lang="less" type="text/less">
</style>

這樣的話,移動端頁面在安卓微信瀏覽器裏的播放效果就正常了,若是產品的播放視頻功能不要求自定義樣式,那麼像這樣用video原生標籤就挺方便的,並且每一個瀏覽器的video標籤的樣式都不同,Safari的更好看些。github

相關文章
相關標籤/搜索