Skip to content

M
mould-vuecli3
Commit 57dce2db authored by Jeff's avatar Jeff
Browse files
Options

更新规则

parent c92fd173
Hide whitespace changes
Inline Side-by-side
Showing with 603 additions and 539 deletions
src/App.vue
View file @ 57dce2db
<template>
<div id="app">
<common-header />
<body class="body-container">
<side-nav />
<router-view style="flex:1;border: 1px solid #666;" />
<right-panel />
</body>
<modal-layer />
</div>
<div id="app">
<common-header></common-header>
<body class="body-container">
<side-nav></side-nav>
<router-view style="flex:1;border: 1px solid #666;"></router-view>
<right-panel></right-panel>
</body>
<modal-layer></modal-layer>
</div>
</template>
<script>
import CommonHeader from '@/components/header/index.vue'
import ModalLayer from '@/components/modal/modalLayer.vue'
export default {
components: {
CommonHeader,
ModalLayer,
SideNav: () => import('@/components/sideNav/index.vue'),
RightPanel: () => import('@/components/rightPanel/index.vue')
},
data() {
return {}
},
async created() {
let result = await this.$http.get('/webapi/home/banner?type=1&category=18')
console.log('result:', result)
}
components: {
CommonHeader,
ModalLayer,
SideNav: () => import('@/components/sideNav/index.vue'),
RightPanel: () => import('@/components/rightPanel/index.vue')
},
data() {
return {}
},
async created() {
let result = await this.$http.get('/webapi/home/banner?type=1&category=18')
console.log('result:', result)
}
}
</script>
......
src/components/header/index.vue
View file @ 57dce2db
<template>
<div class="comp-commonheader">
<h1>LAIHUA</h1>
<div class="current-page">
当前的宝
</div>
<tip-panel />
<div class="show-modal" @click="showModal">
show-modal
</div>
<div class="comp-commonheader">
<h1>LAIHUA</h1>
<div class="current-page">
当前的宝
</div>
<tip-panel></tip-panel>
<div
class="show-modal"
@click="showModal"
>
show-modal
</div>
</div>
</template>
<script>
export default {
components: {
tipPanel: () => import('@/components/header/tipPanel.vue')
},
data() {
return {}
},
created() {},
mounted() {},
methods: {
showModal() {
this.$modal.show('selectModal')
}
components: {
tipPanel: () => import('@/components/header/tipPanel.vue')
},
data() {
return {}
},
created() {},
mounted() {},
methods: {
showModal() {
this.$modal.show('selectModal')
}
}
}
</script>
......
src/components/header/tipPanel.vue
View file @ 57dce2db
<template>
<div class="comp-header-tippanel">
怎么操作？
</div>
<div class="comp-header-tippanel">
怎么操作？
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {}
data() {
return {}
},
created() {},
mounted() {}
}
</script>
......
src/components/misc/tutorialContent.vue
View file @ 57dce2db
<template>
<div />
<div></div>
</template>
<script>
export default {
data() {
return {}
},
methods: {}
data() {
return {}
},
methods: {}
}
</script>
......
src/components/modal/completeContent.vue
View file @ 57dce2db
<template>
<div>
complete content
</div>
<div>
complete content
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {}
data() {
return {}
},
methods: {}
}
</script>
......
src/components/modal/completeModal.vue
View file @ 57dce2db
<template>
<modal name="completeModal" :click-to-close="false">
<complete-content />
</modal>
<modal
name="completeModal"
:click-to-close="false"
>
<complete-content></complete-content>
</modal>
</template>
<script>
import CompleteContent from './completeContent'
export default {
components: {
CompleteContent
},
data() {
return {}
},
methods: {}
components: {
CompleteContent
},
data() {
return {}
},
methods: {}
}
</script>
......
src/components/modal/modalLayer.vue
View file @ 57dce2db
<template>
<div class="modal-layer">
<complete-modal />
<select-modal />
</div>
<div class="modal-layer">
<complete-modal></complete-modal>
<select-modal></select-modal>
</div>
</template>
<script>
import CompleteModal from '@/components/modal/completeModal'
import SelectModal from '@/components/modal/selectModal'
export default {
components: {
CompleteModal,
SelectModal
},
data() {
return {}
},
methods: {}
components: {
CompleteModal,
SelectModal
},
data() {
return {}
},
methods: {}
}
</script>
......
src/components/modal/selectContent.vue
View file @ 57dce2db
<template>
<div>
<div class="close-btn" @click="close">
close
</div>
选择视频
<div>
<div
class="close-btn"
@click="close"
>
close
</div>
选择视频
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
close() {
this.$modal.hide('selectModal')
}
data() {
return {}
},
methods: {
close() {
this.$modal.hide('selectModal')
}
}
}
</script>
......
src/components/modal/selectModal.vue
View file @ 57dce2db
<template>
<modal name="selectModal" :click-to-close="false">
<select-content />
</modal>
<modal
name="selectModal"
:click-to-close="false"
>
<select-content></select-content>
</modal>
</template>
<script>
import SelectContent from './selectContent'
export default {
components: {
SelectContent
},
data() {
return {}
},
methods: {}
components: {
SelectContent
},
data() {
return {}
},
methods: {}
}
</script>
......
src/components/rightPanel/index.vue
View file @ 57dce2db
<template>
<div class="comp-rightpanel">
<router-view name="panel" />
</div>
<div class="comp-rightpanel">
<router-view name="panel"></router-view>
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {}
data() {
return {}
},
created() {},
mounted() {}
}
</script>
......
src/components/rightPanel/screenshotPanel.vue
View file @ 57dce2db
<template>
<div>
screenshotPanel
</div>
<div>
screenshotPanel
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {}
data() {
return {}
},
created() {},
mounted() {}
}
</script>
......
src/components/sideNav/index.vue
View file @ 57dce2db
<template>
<div class="comp-sidenav">
<router-link to="/">
Home
</router-link>
<router-link to="/about">
About
</router-link>
<router-link to="/cutter">
cutter
</router-link>
<router-link to="/videoConverter">
转换宝
</router-link>
<router-link to="/screenshot">
screenshot
</router-link>
</div>
<div class="comp-sidenav">
<router-link to="/">
Home
</router-link>
<router-link to="/about">
About
</router-link>
<router-link to="/cutter">
cutter
</router-link>
<router-link to="/videoConverter">
转换宝
</router-link>
<router-link to="/screenshot">
screenshot
</router-link>
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {}
data() {
return {}
},
created() {},
mounted() {}
}
</script>
......
src/components/videoCutter/videoChange.vue
View file @ 57dce2db
<template>
<div class="video-change" @click="changeVideo">
替换视频
</div>
<div
class="video-change"
@click="changeVideo"
>
替换视频
</div>
</template>
<script>
export default {
methods: {
changeVideo() {
this.$emit('changeVideo')
}
methods: {
changeVideo() {
this.$emit('changeVideo')
}
}
}
</script>
<style lang="scss" scoped>
......
src/components/videoCutter/videoControl.vue
View file @ 57dce2db
<template>
<div class="video-control">
<div class="video-play-btn" @click="play()">
播放
</div>
<div class="video-time-content">
<div class="now-time">
{{ nowTime | formatTime }}
</div>
<span>/</span>
<div class="total-time">
{{ duration | formatTime }}
</div>
</div>
<div class="video-control">
<div
class="video-play-btn"
@click="play()"
>
播放
</div>
<div class="video-time-content">
<div class="now-time">
{{ nowTime | formatTime }}
</div>
<span>/</span>
<div class="total-time">
{{ duration | formatTime }}
</div>
</div>
</div>
</template>
<script>
export default {
filters: {
formatTime(duration) {
if (duration <= 0) return '00:00'
if (!duration) return '--:--'
let min = ~~(duration / 60)
min = (min + '').length === 1 ? '0' + min : min
let sec = Math.floor(duration % 60)
sec = (sec + '').length === 1 ? '0' + sec : sec
min = min || '00'
sec = sec || '00'
return min + ':' + sec
}
},
filters: {
formatTime(duration) {
if (duration <= 0) return '00:00'
if (!duration) return '--:--'
let min = ~~(duration / 60)
min = (min + '').length === 1 ? '0' + min : min
let sec = Math.floor(duration % 60)
sec = (sec + '').length === 1 ? '0' + sec : sec
min = min || '00'
sec = sec || '00'
return min + ':' + sec
}
},
props: ['duration', 'nowTime'], // eslint-disable-line
data() {
return {}
},
methods: {
play() {
this.$emit('play')
}
data() {
return {}
},
methods: {
play() {
this.$emit('play')
}
}
}
</script>
<style lang="scss" scoped>
......
src/components/videoCutter/videoPlayer.vue
View file @ 57dce2db
<template>
<div class="video-player">
<video ref="videoDom" src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4" />
</div>
<div class="video-player">
<video
ref="videoDom"
src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"
></video>
</div>
</template>
<script>
export default {
data() {
return {
state: 'pluse',
times: 0,
canPlay: false
}
data() {
return {
state: 'pluse',
times: 0,
canPlay: false
}
},
mounted() {
this.$bus.on('videoPlayer.play', (data) => {
if (data.time !== undefined) {
this.currentTime(data.time)
}
if (data.play) {
this.play()
} else {
this.pause()
}
})
this.$nextTick(() => {
this.$refs.videoDom.addEventListener('canplay', this.canPlayFunc)
this.$refs.videoDom.addEventListener('ended', () => {
this.$emit('ended')
})
this.$refs.videoDom.addEventListener('timeupdate', () => {
this.$emit('timeupdate', this.$refs.videoDom.currentTime)
})
})
},
beforeDestroy() {
this.$refs.videoDom.removeEventListener('canplay')
this.$refs.videoDom.removeEventListener('ended')
this.$refs.videoDom.removeEventListener('timeupdate')
},
methods: {
canPlayFunc() {
this.canPlay = true
let from = this.$parent.$options.name || 'videoPlayer'
this.$bus.emit(`${from}.canPlay`, this.$refs.videoDom.duration)
},
mounted() {
this.$bus.on('videoPlayer.play', (data) => {
if (data.time !== undefined) {
this.currentTime(data.time)
}
if (data.play) {
this.play()
} else {
this.pause()
}
})
this.$nextTick(() => {
this.$refs.videoDom.addEventListener('canplay', this.canPlayFunc)
this.$refs.videoDom.addEventListener('ended', () => {
this.$emit('ended')
})
this.$refs.videoDom.addEventListener('timeupdate', () => {
this.$emit('timeupdate', this.$refs.videoDom.currentTime)
})
})
play() {
if (!this.canPlay) return
this.$refs.videoDom.play()
},
beforeDestroy() {
this.$refs.videoDom.removeEventListener('canplay')
this.$refs.videoDom.removeEventListener('ended')
this.$refs.videoDom.removeEventListener('timeupdate')
pause() {
if (!this.canPlay) return
this.$refs.videoDom.pause()
},
methods: {
canPlayFunc() {
this.canPlay = true
let from = this.$parent.$options.name || 'videoPlayer'
this.$bus.emit(`${from}.canPlay`, this.$refs.videoDom.duration)
},
play() {
if (!this.canPlay) return
this.$refs.videoDom.play()
},
pause() {
if (!this.canPlay) return
this.$refs.videoDom.pause()
},
currentTime(time) {
if (!this.canPlay) return
this.$refs.videoDom.currentTime = time
}
currentTime(time) {
if (!this.canPlay) return
this.$refs.videoDom.currentTime = time
}
}
}
</script>
<style lang="scss" scoped>
......
src/main.js
View file @ 57dce2db
......@@ -18,7 +18,7 @@ Vue.config.productionTip = false
Vue.prototype.$http = axios
new Vue({
router,
store,
render: (h) => h(App)
router,
store,
render: (h) => h(App)
}).$mount('#app')
src/registerServiceWorker.js
View file @ 57dce2db
......@@ -3,27 +3,27 @@
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready() {
console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB')
},
registered() {
console.log('Service worker has been registered.')
},
cached() {
console.log('Content has been cached for offline use.')
},
updatefound() {
console.log('New content is downloading.')
},
updated() {
console.log('New content is available; please refresh.')
},
offline() {
console.log('No internet connection found. App is running in offline mode.')
},
error(error) {
console.error('Error during service worker registration:', error)
}
})
register(`${process.env.BASE_URL}service-worker.js`, {
ready() {
console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB')
},
registered() {
console.log('Service worker has been registered.')
},
cached() {
console.log('Content has been cached for offline use.')
},
updatefound() {
console.log('New content is downloading.')
},
updated() {
console.log('New content is available; please refresh.')
},
offline() {
console.log('No internet connection found. App is running in offline mode.')
},
error(error) {
console.error('Error during service worker registration:', error)
}
})
}
src/router/index.js
View file @ 57dce2db
......@@ -7,42 +7,42 @@ import screenshotPanel from '../components/rightPanel/screenshotPanel.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Bao3',
component: Bao3
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/cutter',
name: 'Cutter',
component: () => import(/* webpackChunkName: "bao1" */ '../views/videoCutter.vue')
},
{
path: '/videoConverter',
name: 'VideoConverter',
component: () => import(/* webpackChunkName: "bao2" */ '../views/videoConverter.vue')
},
{
path: '/screenshot',
components: {
default: Screenshot,
panel: screenshotPanel
}
{
path: '/',
name: 'Bao3',
component: Bao3
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/cutter',
name: 'Cutter',
component: () => import(/* webpackChunkName: "bao1" */ '../views/videoCutter.vue')
},
{
path: '/videoConverter',
name: 'VideoConverter',
component: () => import(/* webpackChunkName: "bao2" */ '../views/videoConverter.vue')
},
{
path: '/screenshot',
components: {
default: Screenshot,
panel: screenshotPanel
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
src/store/global.js
View file @ 57dce2db
......@@ -2,11 +2,11 @@
// getter调用示例：this.$store.getters['test']
const state = {
_test: 1
_test: 1
}
const getters = {
test: (state) => state._test
test: (state) => state._test
}
const mutations = {}
......@@ -14,8 +14,8 @@ const mutations = {}
const actions = {}
export default {
state,
getters,
mutations,
actions
state,
getters,
mutations,
actions
}
src/store/index.js
View file @ 57dce2db
......@@ -7,8 +7,8 @@ import moduleA from './modules/moduleA'
Vue.use(Vuex)
export default new Vuex.Store({
...global,
modules: {
moduleA
}
...global,
modules: {
moduleA
}
})
src/store/modules/moduleA.js
View file @ 57dce2db
......@@ -2,11 +2,11 @@
// getter调用示例：this.$store.getters['moduleA/moduleState']
const state = {
_moduleState: 'moduleState'
_moduleState: 'moduleState'
}
const getters = {
moduleState: (state) => state._moduleState
moduleState: (state) => state._moduleState
}
const mutations = {}
......@@ -14,9 +14,9 @@ const mutations = {}
const actions = {}
export default {
namespaced: true,
state,
getters,
mutations,
actions
namespaced: true,
state,
getters,
mutations,
actions
}
src/views/About.vue
View file @ 57dce2db
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/bao2.vue
View file @ 57dce2db
<template>
<div class="comp-bao2">
bao2
</div>
<div class="comp-bao2">
bao2
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {}
data() {
return {}
},
created() {},
mounted() {}
}
</script>
......
src/views/bao3.vue
View file @ 57dce2db
<template>
<div class="comp-bao2">
bao3
<!-- <img src="../assets/logo.png" alt=""> -->
</div>
<div class="comp-bao2">
bao3
<!-- <img src="../assets/logo.png" alt=""> -->
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {}
data() {
return {}
},
created() {},
mounted() {}
}
</script>
......
src/views/screenshot.vue
View file @ 57dce2db
<template>
<div class="screenshot">
<div class="content">
<video id="screenshot-video" width="400" height="300" :src="srcUrl" controls></video>
</div>
<div class="operate-area">
<input id="screenshot-input" type="file" style="display:none;" @change="changeFile" />
<label id="select-btn">选择文件</label>
</div>
<div class="screenshot">
<div class="content">
<video
id="screenshot-video"
width="400"
height="300"
:src="srcUrl"
controls
></video>
</div>
<div class="operate-area">
<input
id="screenshot-input"
type="file"
style="display:none;"
@change="changeFile"
>
<label id="select-btn">选择文件</label>
</div>
</div>
</template>
<script>
export default {
name: 'Screenshot',
data() {
return {
srcUrl: null
}
},
created() {},
mounted() {
let input = document.getElementById('screenshot-input')
let fileBtn = document.getElementById('select-btn')
fileBtn.addEventListener('click', function() {
input.click()
})
let video = document.getElementById('screenshot-video')
video.onerror = function(e) {
console.log('onerror', e)
}
video.addEventListener('loadedmetadata', function(e) {
console.log('loadedmetadata', e)
//webkitVideoDecodedByteCount
if (e.target.webkitVideoDecodedByteCount < 1) {
console.error('格式不支持')
}
})
name: 'Screenshot',
data() {
return {
srcUrl: null
}
},
created() {},
mounted() {
let input = document.getElementById('screenshot-input')
let fileBtn = document.getElementById('select-btn')
fileBtn.addEventListener('click', function() {
input.click()
})
let video = document.getElementById('screenshot-video')
video.onerror = function(e) {
console.log('onerror', e)
}
video.addEventListener('loadedmetadata', function(e) {
console.log('loadedmetadata', e)
//webkitVideoDecodedByteCount
if (e.target.webkitVideoDecodedByteCount < 1) {
console.error('格式不支持')
}
})
//loadedmetadata
},
methods: {
selectClick() {},
changeFile(e) {
//console.log('changeFile', e)
if (e.target.files[0]) {
this.srcUrl = URL.createObjectURL(e.target.files[0])
// let _this = this
// let reader = new FileReader()
// reader.addEventListener(
// 'load',
// () => {
// console.log('_this.srcUrl', this)
// _this.srcUrl = reader.result
// },
// false
// )
// reader.readAsDataURL(e.target.files[0])
}
//e.target
}
//loadedmetadata
},
methods: {
selectClick() {},
changeFile(e) {
//console.log('changeFile', e)
if (e.target.files[0]) {
this.srcUrl = URL.createObjectURL(e.target.files[0])
// let _this = this
// let reader = new FileReader()
// reader.addEventListener(
// 'load',
// () => {
// console.log('_this.srcUrl', this)
// _this.srcUrl = reader.result
// },
// false
// )
// reader.readAsDataURL(e.target.files[0])
}
//e.target
}
}
}
</script>
......
src/views/videoConverter.vue
View file @ 57dce2db
<template>
<div class="videoConverter">
<ul>
<li v-for="(item, index) in taskList" :key="index">
<div class="info">
<div class="cove">
视频封面
</div>
<div>
<div>{{ item.name }}.mp4</div>
<div>时长:{{ item.duration }}</div>
</div>
</div>
<div class="operationPanel">
<div v-show="item.state == 0" class="wait">
<div>输出格式</div>
<div class="selectionFormat">
mp4
</div>
<div class="delete" @click="clearTask(item)">
删除
</div>
</div>
<div v-show="item.state == 1" class="active">
<div class="progress">
<div>转换中{{ item.progress }}%</div>
<div class="slide">
<div />
</div>
</div>
<div class="stop" @click="stopTask(item)">
取消
</div>
</div>
</div>
</li>
</ul>
<div class="editBar">
<div class="addVideo" @click="addVideo">
添加视频
<div class="videoConverter">
<ul>
<li
v-for="(item, index) in taskList"
:key="index"
>
<div class="info">
<div class="cove">
视频封面
</div>
<div>
<div>{{ item.name }}.mp4</div>
<div>时长:{{ item.duration }}</div>
</div>
</div>
<div class="operationPanel">
<div
v-show="item.state == 0"
class="wait"
>
<div>输出格式</div>
<div class="selectionFormat">
mp4
</div>
<div class="clearList" @click="clearAllTasks">
清空列表
<div
class="delete"
@click="clearTask(item)"
>
删除
</div>
<div class="clearWatermark">
去除水印
</div>
<div
v-show="item.state == 1"
class="active"
>
<div class="progress">
<div>转换中{{ item.progress }}%</div>
<div class="slide">
<div></div>
</div>
</div>
</div>
<div class="startAll" @click="startAllTasks">
开始转换
<div
class="stop"
@click="stopTask(item)"
>
取消
</div>
</div>
</div>
</li>
</ul>
<div class="editBar">
<div
class="addVideo"
@click="addVideo"
>
添加视频
</div>
<div
class="clearList"
@click="clearAllTasks"
>
清空列表
</div>
<div class="clearWatermark">
去除水印
</div>
</div>
<div
class="startAll"
@click="startAllTasks"
>
开始转换
</div>
</div>
</template>
<script>
export default {
name: 'VideoConverter',
components: {},
props: {},
data() {
return {
taskList: []
}
name: 'VideoConverter',
components: {},
props: {},
data() {
return {
taskList: []
}
},
computed: {},
watch: {},
created() {
for (let i = 1; i < 10; i++) {
this.taskList.push({
cover: '',
name: '视频片段' + i,
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
}
},
methods: {
addVideo() {
this.taskList.push({
cover: '',
name: '视频片段' + (this.taskList.length + 1),
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
},
computed: {},
watch: {},
created() {
for (let i = 1; i < 10; i++) {
this.taskList.push({
cover: '',
name: '视频片段' + i,
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
}
stopTask(item) {
item.state = 0
},
methods: {
addVideo() {
this.taskList.push({
cover: '',
name: '视频片段' + (this.taskList.length + 1),
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
},
stopTask(item) {
item.state = 0
},
clearTask(item) {
let index = this.taskList.indexOf(item)
if (index > -1) {
this.taskList.splice(index, 1)
}
},
clearAllTasks() {
this.taskList = []
},
startAllTasks() {
this.taskList.forEach((task) => {
task.state = 1
})
}
clearTask(item) {
let index = this.taskList.indexOf(item)
if (index > -1) {
this.taskList.splice(index, 1)
}
},
clearAllTasks() {
this.taskList = []
},
startAllTasks() {
this.taskList.forEach((task) => {
task.state = 1
})
}
}
}
</script>
......
src/views/videoCutter.vue
View file @ 57dce2db
<template>
<div class="video-cutter">
<div class="video-content">
<VideoPlayer @currentTime="changeTime" @end="playEnd" @timeupdate="timeupdate" />
</div>
<div class="video-btn">
<videoChange @changeVideo="changeVideo" />
<videoControl :duration="duration" :now-time="nowTime" @play="videoPlay" />
<div />
</div>
<div />
<div />
<div class="video-cutter">
<div class="video-content">
<VideoPlayer
@currentTime="changeTime"
@end="playEnd"
@timeupdate="timeupdate"
></VideoPlayer>
</div>
<div class="video-btn">
<videoChange @changeVideo="changeVideo"></videoChange>
<videoControl
:duration="duration"
:now-time="nowTime"
@play="videoPlay"
></videoControl>
<div></div>
</div>
<div></div>
<div></div>
</div>
</template>
<script>
export default {
name: 'VideoCutter',
components: {
VideoPlayer: () => import('@/components/videoCutter/videoPlayer.vue'),
VideoChange: () => import('@/components/videoCutter/videoChange.vue'),
VideoControl: () => import('@/components/videoCutter/videoControl.vue')
name: 'VideoCutter',
components: {
VideoPlayer: () => import('@/components/videoCutter/videoPlayer.vue'),
VideoChange: () => import('@/components/videoCutter/videoChange.vue'),
VideoControl: () => import('@/components/videoCutter/videoControl.vue')
},
data() {
return {
name: '',
nowTime: 0,
duration: 0,
playing: false,
canPlay: false
}
},
created() {},
mounted() {
this.$bus.on('VideoCutter.canPlay', this.canPlayFunc)
},
methods: {
changeVideo() {
console.log('todo change video, <-----lilei')
},
canPlayFunc(data) {
this.duration = data
this.canPlay = true
},
data() {
return {
name: '',
nowTime: 0,
duration: 0,
playing: false,
canPlay: false
videoPlay() {
if (!this.canPlay) return
let ob = {}
if (this.playing) {
ob.play = false
} else {
ob.play = true
if (this.nowTime >= this.duration) {
ob.time = 0
}
}
this.playing = !this.playing
this.$bus.emit('videoPlayer.play', ob)
},
created() {},
mounted() {
this.$bus.on('VideoCutter.canPlay', this.canPlayFunc)
changeTime(data) {
console.log(data)
},
methods: {
changeVideo() {
console.log('todo change video, <-----lilei')
},
canPlayFunc(data) {
this.duration = data
this.canPlay = true
},
videoPlay() {
if (!this.canPlay) return
let ob = {}
if (this.playing) {
ob.play = false
} else {
ob.play = true
if (this.nowTime >= this.duration) {
ob.time = 0
}
}
this.playing = !this.playing
this.$bus.emit('videoPlayer.play', ob)
},
changeTime(data) {
console.log(data)
},
playEnd() {
this.playing = false
this.nowTime = this.duration
},
timeupdate(time) {
this.nowTime = time
}
playEnd() {
this.playing = false
this.nowTime = this.duration
},
timeupdate(time) {
this.nowTime = time
}
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment