zydx-plus 1.7.31 → 1.9.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zydx-plus",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.31",
|
|
4
4
|
"description": "Vue.js",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"files": [
|
|
@@ -21,7 +21,10 @@
|
|
|
21
21
|
"author": "",
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"vue": "^3.2.13",
|
|
24
|
-
"vue-draggable-next": "^2.1.1"
|
|
24
|
+
"vue-draggable-next": "^2.1.1",
|
|
25
|
+
"pdfjs-dist": "^2.0.943",
|
|
26
|
+
"flipbook-vue": "^1.0.0-beta.4",
|
|
27
|
+
"hls.js": "^1.3.5"
|
|
25
28
|
},
|
|
26
29
|
"devDependencies": {
|
|
27
30
|
"@vue/component-compiler-utils": "^2.6.0",
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div id="docView">
|
|
3
|
+
<div class="pdf-container">
|
|
4
|
+
<canvas :id="'pdf-canvas'+ index" v-for="(item,index) in pdfPages" class="pdf-canvas"></canvas>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="book">
|
|
7
|
+
<flipbook class="flipbook" :pages="imgArr" @flip-left-end="flipLeft" @flip-right-end="flipRight" v-slot="flipbook" :singlePage="singlePage" :ambient="0" :gloss="1" :dragToFlip="false" :pagesHiRes="0">
|
|
8
|
+
<div class="but">
|
|
9
|
+
<button class="but-brown" @click="flipbook.flipLeft">上一页</button>
|
|
10
|
+
<button class="but-brown" @click="flipbook.flipRight">下一页</button>
|
|
11
|
+
</div>
|
|
12
|
+
</flipbook>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
import flipbook from 'flipbook-vue'
|
|
19
|
+
import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' // 注意导入的写法
|
|
20
|
+
PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
|
|
21
|
+
export default {
|
|
22
|
+
name: "zydx-flip",
|
|
23
|
+
components: {flipbook},
|
|
24
|
+
data() {
|
|
25
|
+
return {
|
|
26
|
+
pdfPages: 0,
|
|
27
|
+
imgArr: [],
|
|
28
|
+
hei: 0
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
props: {
|
|
32
|
+
source: {
|
|
33
|
+
type: String,
|
|
34
|
+
default: ''
|
|
35
|
+
},
|
|
36
|
+
singlePage: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: false
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
mounted() {
|
|
42
|
+
this.$nextTick(() => {
|
|
43
|
+
this.readPdf()
|
|
44
|
+
})
|
|
45
|
+
},
|
|
46
|
+
methods: {
|
|
47
|
+
flipLeft(e) {
|
|
48
|
+
this.$emit('flip',e)
|
|
49
|
+
},
|
|
50
|
+
flipRight(e) {
|
|
51
|
+
this.$emit('flip',e)
|
|
52
|
+
},
|
|
53
|
+
readPdf() {
|
|
54
|
+
let that = this
|
|
55
|
+
const loadingTask = PdfJs.getDocument(this.source)
|
|
56
|
+
loadingTask.promise.then((pdf) => {
|
|
57
|
+
that.pdfPages = pdf.numPages // 获取pdf文件的总页数
|
|
58
|
+
for(let i=0; i<that.pdfPages; i++) {
|
|
59
|
+
pdf.getPage(i+1).then(function(page) {
|
|
60
|
+
const canvas = document.getElementById('pdf-canvas' + i)
|
|
61
|
+
const ctx = canvas.getContext('2d')
|
|
62
|
+
const dpr = window.devicePixelRatio || 1
|
|
63
|
+
const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
|
|
64
|
+
const ratio = dpr / bsr
|
|
65
|
+
const viewport = page.getViewport({ scale: 1 })
|
|
66
|
+
canvas.width = viewport.width * ratio
|
|
67
|
+
canvas.height = viewport.height * ratio
|
|
68
|
+
canvas.style.width = viewport.width + 'px'
|
|
69
|
+
canvas.style.height = viewport.height + 'px'
|
|
70
|
+
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
|
|
71
|
+
const renderContext = {
|
|
72
|
+
canvasContext: ctx,
|
|
73
|
+
viewport: viewport
|
|
74
|
+
}
|
|
75
|
+
page.render(renderContext)
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
setTimeout(() => {
|
|
79
|
+
for(let i=0; i<that.pdfPages; i++) {
|
|
80
|
+
const canvas = document.getElementById('pdf-canvas' + i)
|
|
81
|
+
const dataURL = canvas.toDataURL("image/jpeg",1); //获取Base64编码
|
|
82
|
+
that.imgArr.push(dataURL)
|
|
83
|
+
}
|
|
84
|
+
},0)
|
|
85
|
+
})
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
</script>
|
|
90
|
+
|
|
91
|
+
<style scoped>
|
|
92
|
+
#docView{
|
|
93
|
+
height: 100%;
|
|
94
|
+
}
|
|
95
|
+
.but-brown{
|
|
96
|
+
background-color: #c64c10;
|
|
97
|
+
padding: 0 20px;
|
|
98
|
+
font-size: 12px;
|
|
99
|
+
color: #fff;
|
|
100
|
+
height: 24px;
|
|
101
|
+
line-height: 24px;
|
|
102
|
+
border-radius: 5px;
|
|
103
|
+
border: 0;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
margin-left: 10px;
|
|
106
|
+
}
|
|
107
|
+
.but{
|
|
108
|
+
position: absolute;
|
|
109
|
+
bottom: 0;
|
|
110
|
+
left: 0;
|
|
111
|
+
right: 0;
|
|
112
|
+
z-index: 1;
|
|
113
|
+
text-align: center;
|
|
114
|
+
}
|
|
115
|
+
.book{
|
|
116
|
+
width: 100%;
|
|
117
|
+
height: 100%;
|
|
118
|
+
}
|
|
119
|
+
.flipbook {
|
|
120
|
+
width: 100%;
|
|
121
|
+
height: 100%;
|
|
122
|
+
position: relative;
|
|
123
|
+
padding-bottom: 24px;
|
|
124
|
+
}
|
|
125
|
+
.pdf-container{
|
|
126
|
+
position: relative;
|
|
127
|
+
}
|
|
128
|
+
.pdf-canvas{
|
|
129
|
+
position: absolute;
|
|
130
|
+
top: -100000px;
|
|
131
|
+
left: 0;
|
|
132
|
+
z-index: -100;
|
|
133
|
+
}
|
|
134
|
+
</style>
|
|
File without changes
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
.video{
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
position: relative;
|
|
5
|
+
background-color: #000;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
}
|
|
8
|
+
.video:hover .bottom{
|
|
9
|
+
transform: translateY(0);
|
|
10
|
+
}
|
|
11
|
+
.video>video{
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
}
|
|
15
|
+
.bottom{
|
|
16
|
+
height: 40px;
|
|
17
|
+
width: 100%;
|
|
18
|
+
position: absolute;
|
|
19
|
+
bottom: 0;
|
|
20
|
+
left: 0;
|
|
21
|
+
z-index: 1;
|
|
22
|
+
background-color: rgba(0,0,0,0.4);
|
|
23
|
+
transform: translateY(100%);
|
|
24
|
+
transition-duration: 200ms
|
|
25
|
+
}
|
|
26
|
+
/*--------------------------*/
|
|
27
|
+
/* 播放按钮样式 */
|
|
28
|
+
.play-pause {
|
|
29
|
+
width: 40px;
|
|
30
|
+
height: 40px;
|
|
31
|
+
position: relative;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
animation: play-pause 0.5s ease;
|
|
34
|
+
}
|
|
35
|
+
/* 播放状态样式 */
|
|
36
|
+
.play-pause.play:before{
|
|
37
|
+
content: "";
|
|
38
|
+
position: absolute;
|
|
39
|
+
top: 50%;
|
|
40
|
+
left: 50%;
|
|
41
|
+
transform: translate(-50%, -50%) scale(1);
|
|
42
|
+
width: 0;
|
|
43
|
+
height: 0;
|
|
44
|
+
border-style: solid;
|
|
45
|
+
border-width: 8px 0 8px 16px;
|
|
46
|
+
border-color: transparent transparent transparent #fff;
|
|
47
|
+
animation: play 0.5s ease;
|
|
48
|
+
}
|
|
49
|
+
/* 暂停状态样式 */
|
|
50
|
+
.play-pause.pause:before,.play-pause.pause:after{
|
|
51
|
+
content: "";
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: 50%;
|
|
54
|
+
left: 50%;
|
|
55
|
+
transform: translate(-50%, -50%) scale(1);
|
|
56
|
+
width: 6px;
|
|
57
|
+
height: 16px;
|
|
58
|
+
background-color: #fff;
|
|
59
|
+
animation: pause 0.5s ease;
|
|
60
|
+
}
|
|
61
|
+
.play-pause.pause:before{
|
|
62
|
+
margin-left: -6px;
|
|
63
|
+
}
|
|
64
|
+
.play-pause.pause:after{
|
|
65
|
+
margin-left: 3px;
|
|
66
|
+
}
|
|
67
|
+
/* 动画定义 */
|
|
68
|
+
@keyframes play-pause {
|
|
69
|
+
from {
|
|
70
|
+
transform: scale(1);
|
|
71
|
+
}
|
|
72
|
+
to {
|
|
73
|
+
transform: scale(1.1);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@keyframes play {
|
|
78
|
+
from {
|
|
79
|
+
transform: translate(-50%, -50%) scale(0);
|
|
80
|
+
}
|
|
81
|
+
to {
|
|
82
|
+
transform: translate(-50%, -50%) scale(1);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@keyframes pause {
|
|
87
|
+
from {
|
|
88
|
+
transform: translate(-50%, -50%) scale(0);
|
|
89
|
+
}
|
|
90
|
+
to {
|
|
91
|
+
transform: translate(-50%, -50%) scale(1);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
.volume{
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 50%;
|
|
97
|
+
right: 20px;
|
|
98
|
+
margin-top: -3px;
|
|
99
|
+
z-index: 1;
|
|
100
|
+
height: 6px;
|
|
101
|
+
width: 100px;
|
|
102
|
+
border-radius: 20px;
|
|
103
|
+
background-color: rgba(255,255,255,0.5);
|
|
104
|
+
user-select: none;
|
|
105
|
+
}
|
|
106
|
+
.volume-ico{
|
|
107
|
+
position: absolute;
|
|
108
|
+
top: -4px;
|
|
109
|
+
left: -7px;
|
|
110
|
+
z-index: 1;
|
|
111
|
+
width: 14px;
|
|
112
|
+
height: 14px;
|
|
113
|
+
border: 1px solid #ccc;
|
|
114
|
+
border-radius: 50%;
|
|
115
|
+
background-color: #fff;
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
box-shadow: 0 0 2px 1px #ccc;
|
|
118
|
+
}
|
|
119
|
+
.volume-img{
|
|
120
|
+
width: 20px;
|
|
121
|
+
height: 20px;
|
|
122
|
+
position: absolute;
|
|
123
|
+
top: -6px;
|
|
124
|
+
left: -30px;
|
|
125
|
+
z-index: 1;
|
|
126
|
+
}
|
|
127
|
+
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="video">
|
|
3
|
+
<video ref="videoEl"></video>
|
|
4
|
+
<div class="bottom">
|
|
5
|
+
<div class="play-pause" :class="{'play': !playing, 'pause': playing}" @click="playOrPause"></div>
|
|
6
|
+
<div class="volume"
|
|
7
|
+
ref="circle"
|
|
8
|
+
@mousedown="circleBegin($event)"
|
|
9
|
+
@mousemove="circleMove($event)"
|
|
10
|
+
@mouseup="circleEnd($event)">
|
|
11
|
+
<div v-html="volumeIco" class="volume-img"></div>
|
|
12
|
+
<div class="volume-ico"
|
|
13
|
+
@mousedown="circleBegin($event)"
|
|
14
|
+
@mousemove="circleMove($event)"
|
|
15
|
+
@mouseup="circleEnd($event)"
|
|
16
|
+
:style="{transform: 'translateX('+ circleX +'px)'}"></div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script>
|
|
23
|
+
import Hls from 'hls.js';
|
|
24
|
+
export default {
|
|
25
|
+
name: "zydx-videos",
|
|
26
|
+
mounted() {
|
|
27
|
+
this.initPlayer();
|
|
28
|
+
// this.initWebRtc();
|
|
29
|
+
},
|
|
30
|
+
data() {
|
|
31
|
+
return {
|
|
32
|
+
volumeIco: '<svg t="1679643651310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2756" width="20" height="20" fill="#ffffff"><path d="M431.207929 106.919125c-14.536065-5.991458-30.570249-2.454912-41.684378 8.683776L198.703551 308.032562l-94.77862 0c-21.468964 0-38.633902 17.024745-38.633902 38.486546l0 331.002716c0 21.460778 17.164938 38.485523 38.633902 38.485523l94.77862 0 191.521988 192.429661c7.446599 7.467065 17.411555 11.530614 27.557636 11.530614 4.992711 0 8.626471-0.915859 13.424754-2.89391 14.545274-6.005784 22.63144-20.143783 22.63144-35.874045L453.839369 142.839219C453.838346 127.108956 445.753203 112.924909 431.207929 106.919125zM376.128473 787.108708 241.016239 649.917116c-7.299243-7.320733-15.827477-11.618619-26.163893-11.618619l-71.852468 0L142.999878 385.742435l71.852468 0c10.336416 0 18.86465-4.297886 26.163893-11.618619l135.112234-137.191592L376.128473 787.108708zM581.9 676.526147c-7.67889 8.590656-18.318204 12.96529-29.000498 12.96529-9.221012 0-18.47477-3.25923-25.891693-9.886161-16.011672-14.302751-17.388019-38.870286-3.080152-54.870702 97.04729-108.533902 10.117428-213.893508-0.113587-225.548966-14.113439-16.081257-12.632715-40.605813 3.388167-54.78986 16.020882-14.189164 40.431851-12.817933 54.697763 3.1262C632.777761 404.416749 698.252984 546.403554 581.9 676.526147zM699.338712 780.485871c-7.677866 8.591679-18.318204 12.96529-29.000498 12.96529-9.219989 0-18.478863-3.25923-25.891693-9.885138-16.010649-14.302751-17.388019-38.871309-3.079128-54.871725 191.540408-214.210733 7.91118-424.49811 0-433.345616-14.307867-16.000416-12.93152-40.568974 3.079128-54.871725 15.997346-14.302751 40.575114-12.927427 54.892191 3.079128C701.739389 246.240217 936.651606 515.090385 699.338712 780.485871zM821.955354 858.351286c-7.67889 8.590656-18.318204 12.96529-29.000498 12.96529-9.221012 0-18.47477-3.25923-25.891693-9.886161-16.011672-14.302751-17.388019-38.870286-3.080152-54.870702 109.224634-122.153084 142.595672-257.939677 99.177813-403.597081-32.952506-110.559025-98.518804-184.728258-99.177813-185.468109-14.307867-16.000416-12.93152-40.564881 3.080152-54.871725 15.992229-14.306844 40.568974-12.930497 54.892191 3.079128C825.049832 169.162748 1128.098893 515.981684 821.955354 858.351286z" p-id="2757"></path></svg>',
|
|
33
|
+
playing: false,
|
|
34
|
+
rtcPeerConnection: null,
|
|
35
|
+
cx: 0,
|
|
36
|
+
circleCDown: false,
|
|
37
|
+
circleX: 100
|
|
38
|
+
};
|
|
39
|
+
},
|
|
40
|
+
props: {
|
|
41
|
+
url: {
|
|
42
|
+
type: String,
|
|
43
|
+
required: true
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
methods: {
|
|
47
|
+
async initWebRtc() {
|
|
48
|
+
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
49
|
+
// this.$refs.videoEl.srcObject = stream;
|
|
50
|
+
this.rtcPeerConnection = new RTCPeerConnection();
|
|
51
|
+
this.rtcPeerConnection.addStream(stream);
|
|
52
|
+
this.rtcPeerConnection.addEventListener('track', (event) => {
|
|
53
|
+
this.$refs.videoEl.srcObject = event.streams[0];
|
|
54
|
+
});
|
|
55
|
+
},
|
|
56
|
+
circleBegin(event) {
|
|
57
|
+
this.circleCDown = true
|
|
58
|
+
this.cx = this.$refs.circle.getBoundingClientRect().x
|
|
59
|
+
let x = event.clientX - this.cx
|
|
60
|
+
this.circleMask(x)
|
|
61
|
+
},
|
|
62
|
+
circleMove(event) {
|
|
63
|
+
if(this.circleCDown) {
|
|
64
|
+
let x = event.clientX - this.cx
|
|
65
|
+
this.circleMask(x)
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
circleEnd(event) {
|
|
69
|
+
this.circleCDown = false
|
|
70
|
+
},
|
|
71
|
+
circleMask(x) {
|
|
72
|
+
let w = this.$refs.circle.getBoundingClientRect().width
|
|
73
|
+
this.circleX = x
|
|
74
|
+
if(x <= 0) this.circleX = 0
|
|
75
|
+
if(x >= w) this.circleX = w
|
|
76
|
+
this.$refs.videoEl.volume = this.circleX/100
|
|
77
|
+
},
|
|
78
|
+
initPlayer() {
|
|
79
|
+
if (Hls.isSupported()) {
|
|
80
|
+
const hls = new Hls();
|
|
81
|
+
hls.loadSource(this.url);
|
|
82
|
+
hls.attachMedia(this.$refs.videoEl);
|
|
83
|
+
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
84
|
+
// this.duration = this.$refs.videoEl.duration;
|
|
85
|
+
});
|
|
86
|
+
} else if (this.$refs.videoEl.canPlayType('application/vnd.apple.mpegurl')) {
|
|
87
|
+
this.$refs.videoEl.src = this.url;
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
playOrPause() {
|
|
91
|
+
if (this.playing) {
|
|
92
|
+
this.$refs.videoEl.pause();
|
|
93
|
+
} else {
|
|
94
|
+
this.$refs.videoEl.play();
|
|
95
|
+
}
|
|
96
|
+
this.playing = !this.playing;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
<style scoped src="./videos.css"></style>
|
package/src/index.js
CHANGED
|
@@ -11,6 +11,8 @@ import Table from './components/data_table/index';
|
|
|
11
11
|
import buttonGroup from './components/buttonGroup/index';
|
|
12
12
|
import spinner from './components/spinner/index';
|
|
13
13
|
import treeList from './components/treeList/index';
|
|
14
|
+
import flip from './components/flip/index';
|
|
15
|
+
import videos from './components/videos/index';
|
|
14
16
|
|
|
15
17
|
const components = [
|
|
16
18
|
Calendar,
|
|
@@ -23,7 +25,9 @@ const components = [
|
|
|
23
25
|
Year,
|
|
24
26
|
Table,
|
|
25
27
|
buttonGroup,
|
|
26
|
-
treeList
|
|
28
|
+
treeList,
|
|
29
|
+
flip,
|
|
30
|
+
videos
|
|
27
31
|
];
|
|
28
32
|
|
|
29
33
|
function install(app) {
|
|
@@ -35,7 +39,7 @@ function install(app) {
|
|
|
35
39
|
}
|
|
36
40
|
|
|
37
41
|
export default {
|
|
38
|
-
version: '1.
|
|
42
|
+
version: '1.9.31',
|
|
39
43
|
install,
|
|
40
44
|
Calendar,
|
|
41
45
|
Message,
|
|
@@ -49,6 +53,8 @@ export default {
|
|
|
49
53
|
Year,
|
|
50
54
|
Table,
|
|
51
55
|
buttonGroup,
|
|
52
|
-
treeList
|
|
56
|
+
treeList,
|
|
57
|
+
flip,
|
|
58
|
+
videos
|
|
53
59
|
};
|
|
54
60
|
|