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