记录使用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
- 1. 记录使用Ant Design Vue过程当中遇到的各类难点及教程（不定时更新）
- 2. 记录开发移动端项目过程当中的各类问题、插件及教程（不定时更新）
- 3. 记录使用Element过程当中遇到的各类难点及教程（不定时更新）
- 4. 记录使用iView过程当中遇到的各类难点及教程（不定时更新）
- 5. 记录使用微信小程序的开发过程当中遇到的各类难点及教程（不定时更新）
- 6. MySQL 当记录不存在时插入，当记录存在时更新
- 7. Greenplum各类Tips(不定时更新)
- 8. 记录整理平常开发中所使用的ES6语法/API，及其遇到的各类难点及教程（不定时更新）
- 9. Gradle插件使用过程记录
- 10. 【记录】前端开发过程当中遇到的坑，以及各类第三方组件的使用
- 更多相关文章...
- • ADO 更新记录 - ADO 教程
- • TortoiseSVN 使用教程 - SVN 教程
- • Git可视化极简易教程 — Git GUI使用方法
- • Java 8 Stream 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 记录使用Ant Design Vue过程当中遇到的各类难点及教程（不定时更新）
- 2. 记录开发移动端项目过程当中的各类问题、插件及教程（不定时更新）
- 3. 记录使用Element过程当中遇到的各类难点及教程（不定时更新）
- 4. 记录使用iView过程当中遇到的各类难点及教程（不定时更新）
- 5. 记录使用微信小程序的开发过程当中遇到的各类难点及教程（不定时更新）
- 6. MySQL 当记录不存在时插入，当记录存在时更新
- 7. Greenplum各类Tips(不定时更新)
- 8. 记录整理平常开发中所使用的ES6语法/API，及其遇到的各类难点及教程（不定时更新）
- 9. Gradle插件使用过程记录
- 10. 【记录】前端开发过程当中遇到的坑，以及各类第三方组件的使用