Skip to content

M
mould-vuecli3
Commit 1eba1ab8 authored by Jeff's avatar Jeff
Browse files
Options

更新规则

parent 41c24d83
Hide whitespace changes
Inline Side-by-side
Showing with 564 additions and 553 deletions
.editorconfig
View file @ 1eba1ab8
...@@ -11,7 +11,7 @@ charset = utf-8 ...@@ -11,7 +11,7 @@ charset = utf-8
indent_style = space indent_style = space
#缩进数量可选整数值2 or 4,或者tab #缩进数量可选整数值2 or 4,或者tab
indent_size = 2 indent_size = 4
#换行符的格式 换行符，lf、cr和crlf #换行符的格式 换行符，lf、cr和crlf
end_of_line = lf end_of_line = lf
......
.eslintrc.js
View file @ 1eba1ab8
...@@ -30,13 +30,24 @@ module.exports = { ...@@ -30,13 +30,24 @@ module.exports = {
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
indent: [ indent: [
'error', 'error',
2, 4,
{ {
SwitchCase: 1, SwitchCase: 1,
flatTernaryExpressions: true flatTernaryExpressions: true
} }
], ],
'comma-dangle': ['error', 'never'], 'comma-dangle': ['error', 'never'],
quotes: ['error', 'single'] quotes: ['error', 'single'],
'vue/html-indent': [
'error',
4,
{
attribute: 1,
baseIndent: 1,
closeBracket: 0,
alignAttributesVertically: true,
ignores: []
}
]
} }
} }
src/App.vue
View file @ 1eba1ab8
<template> <template>
<div id="app"> <div id="app">
<common-header /> <common-header />
<body class="body-container"> <body class="body-container">
<side-nav /> <side-nav />
<router-view style="flex:1;border: 1px solid #666;" /> <router-view style="flex:1;border: 1px solid #666;" />
<right-panel /> <right-panel />
</body> </body>
<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 @ 1eba1ab8
<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 />
<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 @ 1eba1ab8
<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 @ 1eba1ab8
<template> <template>
<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 @ 1eba1ab8
<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 @ 1eba1ab8
<template> <template>
<modal <modal
name="completeModal" name="completeModal"
:click-to-close="false" :click-to-close="false"
> >
<complete-content /> <complete-content />
</modal> </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 @ 1eba1ab8
<template> <template>
<div class="modal-layer"> <div class="modal-layer">
<complete-modal /> <complete-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 @ 1eba1ab8
<template> <template>
<div> <div>
<div <div
class="close-btn" class="close-btn"
@click="close" @click="close"
> >
close close
</div>
选择视频
</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 @ 1eba1ab8
<template> <template>
<modal <modal
name="selectModal" name="selectModal"
:click-to-close="false" :click-to-close="false"
> >
<select-content /> <select-content />
</modal> </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 @ 1eba1ab8
<template> <template>
<div class="comp-rightpanel"> <div class="comp-rightpanel">
<router-view name="panel" /> <router-view name="panel" />
</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 @ 1eba1ab8
<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 @ 1eba1ab8
<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 @ 1eba1ab8
<template> <template>
<div <div
class="video-change" class="video-change"
@click="changeVideo" @click="changeVideo"
> >
替换视频 替换视频
</div> </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 @ 1eba1ab8
<template> <template>
<div class="video-control"> <div class="video-control">
<div <div
class="video-play-btn" class="video-play-btn"
@click="play()" @click="play()"
> >
播放 播放
</div>
<div class="video-time-content">
<div class="now-time">
{{ duration | formatTime }}
</div>
<span>/</span>
<div class="total-time">
{{ duration | formatTime }}
</div>
</div>
</div> </div>
<div class="video-time-content">
<div class="now-time">
{{ duration | 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 @ 1eba1ab8
<template> <template>
<div class="video-player"> <div class="video-player">
<video <video
ref="videoDom" ref="videoDom"
src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4" src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"
/> />
</div> </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')
})
})
},
beforeDestroy() {
this.$refs.videoDom.removeEventListener('canplay')
this.$refs.videoDom.removeEventListener('ended')
},
methods: {
canPlayFunc() {
this.canPlay = true
let from = this.$parent.$options.name || 'videoPlayer'
this.$bus.emit(`${from}.canPlay`, this.$refs.videoDom.duration)
}, },
play() { mounted() {
if (!this.canPlay) return this.$bus.on('videoPlayer.play', (data) => {
this.$refs.videoDom.play() if (data.time !== undefined) {
this.$emit('currentTime', this.$refs.videoDom.currentTime) 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')
})
})
}, },
pause() { beforeDestroy() {
if (!this.canPlay) return this.$refs.videoDom.removeEventListener('canplay')
this.$refs.videoDom.pause() this.$refs.videoDom.removeEventListener('ended')
}, },
currentTime(time) { methods: {
if (!this.canPlay) return canPlayFunc() {
this.$refs.videoDom.currentTime = time 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()
this.$emit('currentTime', this.$refs.videoDom.currentTime)
},
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 @ 1eba1ab8
...@@ -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 @ 1eba1ab8
...@@ -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 @ 1eba1ab8
...@@ -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 @ 1eba1ab8
...@@ -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 @ 1eba1ab8
...@@ -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 @ 1eba1ab8
...@@ -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 @ 1eba1ab8
<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 @ 1eba1ab8
<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 @ 1eba1ab8
<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 @ 1eba1ab8
<template> <template>
<div class="screenshot"> <div class="screenshot">
<div class="content"> <div class="content">
<video id="screenshot-video" /> <video id="screenshot-video" />
</div>
<div class="operate-area">
<input
id="screenshot-input"
type="file"
style="display:none;"
>
</div>
</div> </div>
<div class="operate-area">
<input
id="screenshot-input"
type="file"
style="display:none;"
>
</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() {}
} }
</script> </script>
......
src/views/videoConverter.vue
View file @ 1eba1ab8
<template> <template>
<div class="videoConverter"> <div class="videoConverter">
<ul> <ul>
<li <li
v-for="(item, index) in taskList" v-for="(item, index) in taskList"
:key="index" :key="index"
> >
<div class="info"> <div class="info">
<div class="cove"> <div class="cove">
视频封面 视频封面
</div> </div>
<div> <div>
<div>{{ item.name }}.mp4</div> <div>{{ item.name }}.mp4</div>
<div>时长:{{ item.duration }}</div> <div>时长:{{ item.duration }}</div>
</div> </div>
</div> </div>
<div class="operationPanel"> <div class="operationPanel">
<div <div
v-show="item.state == 0" v-show="item.state == 0"
class="wait" class="wait"
> >
<div>输出格式</div> <div>输出格式</div>
<div class="selectionFormat"> <div class="selectionFormat">
mp4 mp4
</div> </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 <div
class="delete" class="addVideo"
@click="clearTask(item)" @click="addVideo"
> >
删除 添加视频
</div> </div>
</div>
<div
v-show="item.state == 1"
class="active"
>
<div class="progress">
<div>转换中{{ item.progress }}%</div>
<div class="slide">
<div />
</div>
</div>
<div <div
class="stop" class="clearList"
@click="stopTask(item)" @click="clearAllTasks"
> >
取消 清空列表
</div>
<div class="clearWatermark">
去除水印
</div> </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 <div
class="startAll" class="startAll"
@click="startAllTasks" @click="startAllTasks"
> >
开始转换 开始转换
</div>
</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'
})
},
stopTask(item) {
item.state = 0
},
clearTask(item) {
let index = this.taskList.indexOf(item)
if (index > -1) {
this.taskList.splice(index, 1)
}
}, },
clearAllTasks() { computed: {},
this.taskList = [] watch: {},
created() {
for (let i = 1; i < 10; i++) {
this.taskList.push({
cover: '',
name: '视频片段' + i,
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
}
}, },
startAllTasks() { methods: {
this.taskList.forEach((task) => { addVideo() {
task.state = 1 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
})
}
} }
}
} }
</script> </script>
......
src/views/videoCutter.vue
View file @ 1eba1ab8
<template> <template>
<div class="video-cutter"> <div class="video-cutter">
<div class="video-content">
<video-player />
<div class="video-cutter">
<div class="video-content"> <div class="video-content">
<VideoPlayer <video-player />
@currentTime="changeTime" <div class="video-cutter">
@end="playEnd" <div class="video-content">
/> <VideoPlayer
@currentTime="changeTime"
@end="playEnd"
/>
</div>
<div class="video-btn">
<videoChange @changeVideo="changeVideo" />
<videoControl
:duration="duration"
:now-time="nowTime"
@play="videoPlay"
/>
<div />
</div>
<div />
<div />
</div>
</div> </div>
<div class="video-btn">
<videoChange @changeVideo="changeVideo" />
<videoControl
:duration="duration"
:now-time="nowTime"
@play="videoPlay"
/>
<div />
</div>
<div />
<div />
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -31,55 +31,55 @@ import VideoChange from '@/components/videoCutter/videoChange.vue' ...@@ -31,55 +31,55 @@ import VideoChange from '@/components/videoCutter/videoChange.vue'
import VideoControl from '@/components/videoCutter/videoControl.vue' import VideoControl from '@/components/videoCutter/videoControl.vue'
export default { export default {
name: 'VideoCutter', name: 'VideoCutter',
components: { components: {
VideoPlayer, VideoPlayer,
VideoChange, VideoChange,
VideoControl VideoControl
},
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) { data() {
this.duration = data return {
this.canPlay = true name: '',
}, nowTime: 0,
videoPlay() { duration: 0,
if (!this.canPlay) return playing: false,
let ob = {} canPlay: false
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) { created() {},
console.log(data) mounted() {
this.$bus.on('videoCutter.canPlay', this.canPlayFunc)
}, },
playEnd() { methods: {
this.playing = false changeVideo() {
this.nowTime = this.duration 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
}
} }
}
} }
</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