zyronon
3 years ago
14 changed files with 113 additions and 934 deletions
@ -1,185 +0,0 @@
@@ -1,185 +0,0 @@
|
||||
<template> |
||||
<div class="Test"> |
||||
<Video1 |
||||
:is-play="false" |
||||
:video="item" |
||||
:index="0" |
||||
/> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
|
||||
export default { |
||||
name: "Test", |
||||
props: {}, |
||||
data() { |
||||
return { |
||||
comment: '12', |
||||
item: { |
||||
"id": "08a90c93-807b-4a7a-aad3-68f75d65a9c8", |
||||
video: 'http://douyin.ttentau.top/3.mp4', |
||||
"video_data_size": 12371092, |
||||
"duration": 139652, |
||||
"desc": "秋天来了，新疆的可可托海~", |
||||
"allow_download": 1, |
||||
"allow_duet": 0, |
||||
"allow_react": 0, |
||||
"allow_music": 1, |
||||
"allow_douplus": 1, |
||||
"allow_share": 1, |
||||
"digg_count": 167000, |
||||
"comment_count": 8152, |
||||
"download_count": 0, |
||||
"play_count": 0, |
||||
"share_count": 30000, |
||||
"forward_count": 0, |
||||
"collect_count": 2, |
||||
"sort": 74, |
||||
city: '阿勒泰', |
||||
address: '可可托海景区（5A）', |
||||
"musicId": "6e1325da-1af4-4d5e-8a33-3a4a69ff50a3", |
||||
"create_time": "1630392893", |
||||
"creator_id": "54884802577", |
||||
"status": 1, |
||||
"topics": [ |
||||
{ |
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc", |
||||
"name": "旅行大玩家", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
}, |
||||
{ |
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc", |
||||
"name": "旅行推荐官", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
}, |
||||
{ |
||||
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc", |
||||
"name": "抖音旅行", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
}, |
||||
], |
||||
"music": { |
||||
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21", |
||||
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172", |
||||
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3", |
||||
"title": "@旅行家 ~ 七哥创作的原声 - 旅行家 ~ 七哥", |
||||
"creator_id": "54884802577", |
||||
"create_time": "1630391758", |
||||
"status": 1 |
||||
}, |
||||
"author": { |
||||
school: { |
||||
name: '', |
||||
department: '', |
||||
joinTime: '', |
||||
education: '', |
||||
displayType: '', |
||||
}, |
||||
"id": "3", |
||||
"unique_id_modify_time": "1630393144", |
||||
"unique_id": "travels520", |
||||
"favoriting_count": 54, |
||||
"avatar": new URL('../../assets/img/icon/avatar/11.png', import.meta.url).href, |
||||
"city": "", |
||||
"province": '', |
||||
"country": "", |
||||
"birthday": "", |
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172", |
||||
"following_count": 15, |
||||
"follower_count": 302000, |
||||
"aweme_count": 4007000, |
||||
"nickname": "旅行家 ~ 七哥", |
||||
certification: '', |
||||
"phone": "", |
||||
"sex": "", |
||||
"last_login_time": "1630423555", |
||||
"create_time": "1630423555", |
||||
"status": 1, |
||||
"desc": "谢谢关注\n浅谈&合作v：a1231231234\n旅行&报名v: 1231231891242\n新疆 西藏 四川摄影旅拍路线规划与设计", |
||||
"is_private": 0 |
||||
} |
||||
}, |
||||
} |
||||
}, |
||||
computed: {}, |
||||
created() { |
||||
}, |
||||
methods: { |
||||
changeText(e) { |
||||
console.log(e) |
||||
console.log(this.$el.innerText) |
||||
|
||||
}, |
||||
get() { |
||||
console.log(this.$refs.input) |
||||
|
||||
}, |
||||
call() { |
||||
let span = document.createElement('span') |
||||
span.setAttribute('contenteditable', false) |
||||
span.classList.add('link') |
||||
span.innerText = Date.now() + ' ' |
||||
this.$refs.input.append(span) |
||||
}, |
||||
emoji() { |
||||
let span = document.createElement('img') |
||||
span.setAttribute('src', new URL('../assets/img/icon/message/emoji/4.webp')) |
||||
span.classList.add('emoji') |
||||
this.$refs.input.append(span) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "../../assets/less/index"; |
||||
|
||||
.Test { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
background: #fff; |
||||
overflow: auto; |
||||
font-size: 2rem; |
||||
@emoji-width: 4rem; |
||||
|
||||
.emoji { |
||||
width: @emoji-width; |
||||
height: @emoji-width; |
||||
} |
||||
|
||||
.content { |
||||
padding-top: 6rem; |
||||
|
||||
|
||||
.auto-input { |
||||
width: 100%; |
||||
overflow-y: scroll; |
||||
padding: 0 .5rem; |
||||
outline: none; |
||||
} |
||||
|
||||
.auto-input::-webkit-scrollbar { |
||||
width: 0 !important |
||||
} |
||||
|
||||
.auto-input:empty::before { |
||||
/*content: "留下你的精彩评论吧";*/ |
||||
content: attr(placeholder); |
||||
color: #999999; |
||||
} |
||||
|
||||
.auto-input:focus::before { |
||||
content: none; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,157 +0,0 @@
@@ -1,157 +0,0 @@
|
||||
<template> |
||||
<div class="test" v-top-love> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Dom from "../../utils/dom"; |
||||
|
||||
export default { |
||||
name: "Test", |
||||
props: {}, |
||||
components: {}, |
||||
directives: { |
||||
topLove: { |
||||
beforeMount(el, binding, vNode) { |
||||
let click = function (e) { |
||||
let id = 'a' + Date.now() |
||||
let elWidth = 80 |
||||
let rotate = randomNum(0, 1) |
||||
let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" |
||||
id="${id}" |
||||
src="${new URL('../../assets/img/icon/loved.svg', import.meta.url).href}" alt="">` |
||||
let el = new Dom().create(template) |
||||
el.css({top: e.y - elWidth, left: e.x - elWidth / 2,}) |
||||
new Dom().find('.test').append(el) |
||||
|
||||
setTimeout(() => { |
||||
new Dom().find(`#${id}`).remove() |
||||
}, 1000) |
||||
} |
||||
let randomNum = function (minNum, maxNum) { |
||||
switch (arguments.length) { |
||||
case 1: |
||||
return parseInt(Math.random() * minNum + 1, 10); |
||||
case 2: |
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); |
||||
default: |
||||
return 0; |
||||
} |
||||
} |
||||
el.addEventListener('click', click) |
||||
// el.addEventListener('dblclick', click) |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
showShareDialog: true, |
||||
} |
||||
}, |
||||
methods: { |
||||
click(e) { |
||||
let id = 'a' + Date.now() |
||||
let elWidth = 80 |
||||
let rotate = this.randomNum(0, 1) |
||||
let template = `<img class="${rotate ? 'left' : 'right'}" id="${id}" src="${new URL('../assets/img/icon/loved.svg')}" alt="">` |
||||
let el = new Dom().create(template) |
||||
el.css({top: e.y - elWidth, left: e.x - elWidth / 2,}) |
||||
new Dom().find('.test').append(el) |
||||
|
||||
setTimeout(() => { |
||||
new Dom().find(`#${id}`).remove() |
||||
}, 1000) |
||||
}, |
||||
randomNum(minNum, maxNum) { |
||||
switch (arguments.length) { |
||||
case 1: |
||||
return parseInt(Math.random() * minNum + 1, 10); |
||||
case 2: |
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); |
||||
default: |
||||
return 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
@import "../../assets/less/index"; |
||||
|
||||
.test { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
font-size: 1.4rem; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
img { |
||||
position: absolute; |
||||
@width: 8rem; |
||||
width: @width; |
||||
height: @width; |
||||
|
||||
&.left { |
||||
animation: loveLeft 1.1s linear; |
||||
} |
||||
|
||||
&.right { |
||||
animation: loveRight 1.1s linear; |
||||
} |
||||
|
||||
@scale: scale(1.2); |
||||
@rotate: 10deg; |
||||
|
||||
@keyframes loveLeft { |
||||
0% { |
||||
opacity: 0; |
||||
transform: scale(2) rotate(0-@rotate); |
||||
} |
||||
10% { |
||||
opacity: 1; |
||||
transform: scale(1) rotate(0-@rotate); |
||||
} |
||||
15% { |
||||
opacity: 1; |
||||
transform: @scale rotate(0-@rotate); |
||||
} |
||||
40% { |
||||
opacity: 1; |
||||
transform: @scale rotate(0-@rotate); |
||||
} |
||||
100% { |
||||
transform: translateY(-12rem) scale(2) rotate(0-@rotate); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
@keyframes loveRight { |
||||
0% { |
||||
opacity: 0; |
||||
transform: scale(2) rotate(0+@rotate); |
||||
} |
||||
10% { |
||||
opacity: 1; |
||||
transform: scale(1) rotate(0+@rotate); |
||||
} |
||||
15% { |
||||
opacity: 1; |
||||
transform: @scale rotate(0+@rotate); |
||||
} |
||||
40% { |
||||
opacity: 1; |
||||
transform: @scale rotate(0+@rotate); |
||||
} |
||||
100% { |
||||
transform: translateY(-12rem) scale(2) rotate(0+@rotate); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -1,223 +0,0 @@
@@ -1,223 +0,0 @@
|
||||
<template> |
||||
<div class="Test"> |
||||
<SlideRowList |
||||
style="height: calc(100% - 5rem);" |
||||
v-model:active-index="activeIndex" |
||||
indicatorType="home" |
||||
> |
||||
<SlideItem> |
||||
<SlideColumnList> |
||||
<SlideItem style="background: tan"> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
</SlideItem> |
||||
<SlideItem style="background: red;"> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
</SlideItem> |
||||
<SlideItem style="background: yellow"> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
</SlideItem> |
||||
</SlideColumnList> |
||||
</SlideItem> |
||||
<SlideItem> |
||||
<SlideColumnList> |
||||
<SlideItem style="background: tan"> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
</SlideItem> |
||||
<SlideItem style="background: red;"> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
</SlideItem> |
||||
<SlideItem style="background: yellow"> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
</SlideItem> |
||||
</SlideColumnList> |
||||
</SlideItem> |
||||
</SlideRowList> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
|
||||
import BaseButton from "../../components/BaseButton"; |
||||
import BaseMarquee from "../../components/BaseMarquee"; |
||||
import Dom from "../../utils/dom"; |
||||
|
||||
export default { |
||||
name: "Test4", |
||||
components: {BaseButton, BaseMarquee}, |
||||
props: { |
||||
text: { |
||||
type: String, |
||||
default: '@喵嗷污说电影创作的原声' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
activeIndex: 0, |
||||
showIndicator: true, |
||||
} |
||||
}, |
||||
methods: { |
||||
changeIndex() { |
||||
|
||||
} |
||||
}, |
||||
mounted() { |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "../../assets/less/index"; |
||||
|
||||
.Test { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
font-size: 1.4rem; |
||||
|
||||
.content1 { |
||||
padding-top: 6rem; |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
</style> |
||||
@ -1,51 +0,0 @@
@@ -1,51 +0,0 @@
|
||||
<template> |
||||
<div id="Test"> |
||||
<ul> |
||||
<li v-for="item in list" @click="go">{{ item }} -- Test1</li> |
||||
</ul> |
||||
<button @click="$router.push('TestKeepAlivePage1')">go2</button> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "Test", |
||||
components: {}, |
||||
props: { |
||||
modelValue: false |
||||
}, |
||||
data() { |
||||
return { |
||||
list: 0 |
||||
} |
||||
}, |
||||
computed: {}, |
||||
watch: {}, |
||||
created() { |
||||
setTimeout(() => { |
||||
this.list = 50 |
||||
}, 1000) |
||||
}, |
||||
methods: { |
||||
go(){ |
||||
// this.$router.push('TestKeepAlivePage1') |
||||
this.$router.push('/message/all') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="less"> |
||||
#Test { |
||||
position: fixed; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
color: white; |
||||
font-size: 1.6rem; |
||||
overflow: auto; |
||||
|
||||
li { |
||||
padding: 1rem; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,41 +0,0 @@
@@ -1,41 +0,0 @@
|
||||
<template> |
||||
<div id="Test2"> |
||||
<ul> |
||||
<li v-for="item in list" >{{ item }} -- Test2</li> |
||||
</ul> |
||||
<button @click="$back()">返回</button> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "Test2", |
||||
components: {}, |
||||
props: { |
||||
modelValue: false |
||||
}, |
||||
data() { |
||||
return { |
||||
list: 0 |
||||
} |
||||
}, |
||||
computed: {}, |
||||
watch: {}, |
||||
created() { |
||||
setTimeout(()=>{ |
||||
this.list = 50 |
||||
},1000) |
||||
}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
#Test2 { |
||||
color: white; |
||||
font-size: 1.6rem; |
||||
|
||||
li { |
||||
padding: 1rem; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,48 +0,0 @@
@@ -1,48 +0,0 @@
|
||||
<template> |
||||
<div id="TestOne"> |
||||
<!-- <SlideUser/>--> |
||||
<SlideImgs/> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import SlideUser from "../../components/slide/SlideUser"; |
||||
import SlideImgs from "../../components/slide/SlideImgs"; |
||||
|
||||
export default { |
||||
name: "TestOne", |
||||
components: { |
||||
SlideUser, |
||||
SlideImgs |
||||
}, |
||||
props: { |
||||
modelValue: false |
||||
}, |
||||
data() { |
||||
return {} |
||||
}, |
||||
computed: {}, |
||||
watch: {}, |
||||
created() { |
||||
}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "@/assets/less/index"; |
||||
|
||||
#TestOne { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
color: white; |
||||
font-size: 1.4rem; |
||||
|
||||
.content { |
||||
padding-top: 6rem; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,88 +0,0 @@
@@ -1,88 +0,0 @@
|
||||
<template> |
||||
<div id="TestVideo"> |
||||
<video :src="url" ref="video" controls autoplay muted></video> |
||||
<Loading v-if="loading"/> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "TestVideo", |
||||
components: {}, |
||||
props: { |
||||
modelValue: false |
||||
}, |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
url: 'http://ttentau.top/13.mp4?v=' + Date.now() |
||||
} |
||||
}, |
||||
computed: {}, |
||||
watch: {}, |
||||
created() { |
||||
}, |
||||
mounted() { |
||||
let video = this.$refs.video |
||||
// video.addEventListener('progress', () => { |
||||
// console.log('加载中') |
||||
// }) |
||||
// console.log(video) |
||||
|
||||
let eventTester = (e, t) => { |
||||
video.addEventListener(e, () => { |
||||
if (e === 'playing') this.loading = false |
||||
if (e === 'progress') this.loading = true |
||||
if (e === 'waiting') this.loading = true |
||||
console.log((new Date()).getTime(), e, t) |
||||
}, false); |
||||
} |
||||
|
||||
|
||||
eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据 |
||||
eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起） |
||||
eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据 |
||||
// eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据 |
||||
// eventTester("suspend", '延迟下载'); //延迟下载 |
||||
eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起）， |
||||
eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误 |
||||
eventTester("stalled", '网速失速'); //网速失速 |
||||
eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发 |
||||
eventTester("pause", 'pause()触发'); //pause()触发 |
||||
eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度 |
||||
eventTester("loadeddata"); // |
||||
eventTester("waiting", '等待数据，并非错误'); //等待数据，并非错误 |
||||
eventTester("playing", '开始回放'); //开始回放 |
||||
eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停 |
||||
eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕 |
||||
eventTester("seeking", '寻找中'); //寻找中 |
||||
eventTester("seeked", '寻找完毕'); //寻找完毕 |
||||
// eventTester("timeupdate",'播放时间改变'); //播放时间改变 |
||||
eventTester("ended", '播放结束'); //播放结束 |
||||
eventTester("ratechange", '播放速率改变'); //播放速率改变 |
||||
eventTester("durationchange", '资源长度改变'); //资源长度改变 |
||||
eventTester("volumechange", '音量改变'); //音量改变 |
||||
|
||||
}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "@/assets/less/index"; |
||||
|
||||
#TestVideo { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
color: white; |
||||
font-size: 1.4rem; |
||||
|
||||
video { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,54 +0,0 @@
@@ -1,54 +0,0 @@
|
||||
<template> |
||||
<div id="Test6"> |
||||
<p>第{{year}}年</p> |
||||
</div> |
||||
|
||||
|
||||
</template> |
||||
<script> |
||||
import {ref} from "vue"; |
||||
|
||||
export default { |
||||
name: "Test6", |
||||
components: {}, |
||||
props: { |
||||
modelValue: false |
||||
}, |
||||
setup() { |
||||
const year = ref(0) |
||||
setInterval(() => { |
||||
year.value++ |
||||
}, 1000) |
||||
return { |
||||
year |
||||
} |
||||
}, |
||||
data() { |
||||
return {} |
||||
}, |
||||
computed: {}, |
||||
watch: {}, |
||||
created() { |
||||
}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
@import "@/assets/less/index"; |
||||
|
||||
#Test6 { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
color: white; |
||||
font-size: 1.4rem; |
||||
|
||||
.content { |
||||
padding-top: 6rem; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue