vant进度条框架报错
错误信息:Invalid prop: type check failed for prop “percentage”. Expected Number,
网上查找问题原因:
1,因为vant进度条中的percentage是设置百分比的,所以他不可以大于100,把这个percentage这个设置为小于100的就可以了,我设了这种方法,但是貌似不太管用,所以我就去查了第二个方法
2,因为没渲染你就获取数据,所以出现的报错,加上v-if就可以了
<van-progress v-if="item.progress_rate" :percentage="item.progress_rate" :show-pivot="false" />
第二种方法解决了我的问题
百家云移动端h5点播SDK
首先是需要video_id和course_id来请求需要播放视频的token
利用路由传参就可以了
govideodetails(videoid){
this.$router.push({
path:"/videodetails",
query:{
video_id:videoid,
course_id:this.allstudy.course_id
}
})
}
在视频播放页面来接受参数就可以了
created(){
let video_id = this.$route.query.video_id
let course_id = this.$route.query.course_id
console.log(video_id,course_id)
}
接着来获取视频的token根据给的接口和传过来的参数
created() {
let video_id = this.$route.query.video_id;
let course_id = this.$route.query.course_id;
console.log(video_id, course_id);
videotoken({video_id,course_id}).then(res=>{
console.log(res)
})
}
因为我们项目用的百家云的外置播放视频,所以需要外部引入百家云的插件
//在pubic文件下的index.html文件引入文件
<link href="//live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.css" rel="stylesheet">//css文件
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>//jq文件
<script src="//live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.js" > </script>//js文件
在页面中添加一个DOM元素,来使用百家云的插件
定义一个div然后命名id
<div id="baijiayunvideo"></div>
<script>
import { videotoken } from "../http/api";
export default {
data() {
return {
videotoken: "",
video_id: "",
course_id: ""
};
},
created() {
this.video_id = this.$route.query.video_id;
this.course_id = this.$route.query.course_id;
videotoken({ video_id: this.video_id, course_id: this.course_id }).then(
res => {
console.log(res);
var player = new bjcPlayer("#baijiayunvideo", {
token: res.data.data.token,
definition: "low"
});
player.play(res.data.data.video_id);
}
);
this.getPlayToken();
},
methods: {
getPlayToken() {}
}
};
</script>
需要注意的是 页面中的标签需要设置宽高 才能显示
二维码分享
1、点击事件
@click="share"
2、页面
<!-- 二维码 -->
<van-overlay :show="show" @click="show = false">
<div class="wrapper">
<div class="block">
<p>分享</p>
<div>
<img :src="imrUrl" />
</div>
</div>
</div>
</van-overlay>
3、data里面的值
show: false,
imrUrl: ""
4、下载插件
插件地址:https://www.npmjs.com/package/qrcode
npm install --save qrcode
5、使用(官网)
import QRCode from 'qrcode' //那使用哪用
// With promises
QRCode.toDataURL('I am a pony!')
.then(url => {
console.log(url)
})
.catch(err => {
console.error(err)
})
5、点击事件的方法
// 点击分享
share() {
this.show = true;
let url = location.href;//获取当前地址栏的地址
console.log(url);
QRCode.toDataURL(url)
.then(tpian => {
console.log(tpian);
this.imrUrl = tpian;
})
.catch(err => {
console.error(err);
});
},