Commit 1eba1ab8 authored by Jeff's avatar Jeff

更新规则

parent 41c24d83
......@@ -11,7 +11,7 @@ charset = utf-8
indent_style = space
#缩进数量可选整数值2 or 4,或者tab
indent_size = 2
indent_size = 4
#换行符的格式 换行符,lf、cr和crlf
end_of_line = lf
......
......@@ -30,13 +30,24 @@ module.exports = {
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
indent: [
'error',
2,
4,
{
SwitchCase: 1,
flatTernaryExpressions: true
}
],
'comma-dangle': ['error', 'never'],
quotes: ['error', 'single']
quotes: ['error', 'single'],
'vue/html-indent': [
'error',
4,
{
attribute: 1,
baseIndent: 1,
closeBracket: 0,
alignAttributesVertically: true,
ignores: []
}
]
}
}
<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 />
<body class="body-container">
<side-nav />
<router-view style="flex:1;border: 1px solid #666;" />
<right-panel />
</body>
<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>
......
<template>
<div class="comp-commonheader">
<h1>LAIHUA</h1>
<div class="current-page">
当前的宝
<div class="comp-commonheader">
<h1>LAIHUA</h1>
<div class="current-page">
当前的宝
</div>
<tip-panel />
<div
class="show-modal"
@click="showModal"
>
show-modal
</div>
</div>
<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>
......
<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>
......
<template>
<div />
<div />
</template>
<script>
export default {
data() {
return {}
},
methods: {}
data() {
return {}
},
methods: {}
}
</script>
......
<template>
<div>
complete content
</div>
<div>
complete content
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {}
data() {
return {}
},
methods: {}
}
</script>
......
<template>
<modal
name="completeModal"
:click-to-close="false"
>
<complete-content />
</modal>
<modal
name="completeModal"
:click-to-close="false"
>
<complete-content />
</modal>
</template>
<script>
import CompleteContent from './completeContent'
export default {
components: {
CompleteContent
},
data() {
return {}
},
methods: {}
components: {
CompleteContent
},
data() {
return {}
},
methods: {}
}
</script>
......
<template>
<div class="modal-layer">
<complete-modal />
<select-modal />
</div>
<div class="modal-layer">
<complete-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>
......
<template>
<div>
<div
class="close-btn"
@click="close"
>
close
<div>
<div
class="close-btn"
@click="close"
>
close
</div>
选择视频
</div>
选择视频
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
close() {
this.$modal.hide('selectModal')
data() {
return {}
},
methods: {
close() {
this.$modal.hide('selectModal')
}
}
}
}
</script>
......
<template>
<modal
name="selectModal"
:click-to-close="false"
>
<select-content />
</modal>
<modal
name="selectModal"
:click-to-close="false"
>
<select-content />
</modal>
</template>
<script>
import SelectContent from './selectContent'
export default {
components: {
SelectContent
},
data() {
return {}
},
methods: {}
components: {
SelectContent
},
data() {
return {}
},
methods: {}
}
</script>
......
<template>
<div class="comp-rightpanel">
<router-view name="panel" />
</div>
<div class="comp-rightpanel">
<router-view name="panel" />
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {}
data() {
return {}
},
created() {},
mounted() {}
}
</script>
......
<template>
<div>
screenshotPanel
</div>
<div>
screenshotPanel
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {}
data() {
return {}
},
created() {},
mounted() {}
}
</script>
......
<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>
......
<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>
......
<template>
<div class="video-control">
<div
class="video-play-btn"
@click="play()"
>
播放
<div class="video-control">
<div
class="video-play-btn"
@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 class="video-time-content">
<div class="now-time">
{{ duration | 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>
......
<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"
/>
</div>
</template>
<script>
export default {
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')
})
})
},
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)
data() {
return {
state: 'pluse',
times: 0,
canPlay: false
}
},
play() {
if (!this.canPlay) return
this.$refs.videoDom.play()
this.$emit('currentTime', this.$refs.videoDom.currentTime)
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')
})
})
},
pause() {
if (!this.canPlay) return
this.$refs.videoDom.pause()
beforeDestroy() {
this.$refs.videoDom.removeEventListener('canplay')
this.$refs.videoDom.removeEventListener('ended')
},
currentTime(time) {
if (!this.canPlay) return
this.$refs.videoDom.currentTime = time
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()
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>
<style lang="scss" scoped>
......
......@@ -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')
......@@ -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)
}
})
}
......@@ -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
......@@ -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
}
......@@ -7,8 +7,8 @@ import moduleA from './modules/moduleA'
Vue.use(Vuex)
export default new Vuex.Store({
...global,
modules: {
moduleA
}
...global,
modules: {
moduleA
}
})
......@@ -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
}
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<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>
......
<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>
......
<template>
<div class="screenshot">
<div class="content">
<video id="screenshot-video" />
<div class="screenshot">
<div class="content">
<video id="screenshot-video" />
</div>
<div class="operate-area">
<input
id="screenshot-input"
type="file"
style="display:none;"
>
</div>
</div>
<div class="operate-area">
<input
id="screenshot-input"
type="file"
style="display:none;"
>
</div>
</div>
</template>
<script>
export default {
name: 'Screenshot',
data() {
return {
srcUrl: null
}
},
created() {},
mounted() {}
name: 'Screenshot',
data() {
return {
srcUrl: null
}
},
created() {},
mounted() {}
}
</script>
......
<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="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="delete"
@click="clearTask(item)"
class="addVideo"
@click="addVideo"
>
删除
添加视频
</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)"
class="clearList"
@click="clearAllTasks"
>
取消
清空列表
</div>
<div class="clearWatermark">
去除水印
</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
class="startAll"
@click="startAllTasks"
>
开始转换
</div>
</div>
</div>
</template>
<script>
export default {
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'
})
},
stopTask(item) {
item.state = 0
},
clearTask(item) {
let index = this.taskList.indexOf(item)
if (index > -1) {
this.taskList.splice(index, 1)
}
name: 'VideoConverter',
components: {},
props: {},
data() {
return {
taskList: []
}
},
clearAllTasks() {
this.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'
})
}
},
startAllTasks() {
this.taskList.forEach((task) => {
task.state = 1
})
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
})
}
}
}
}
</script>
......
<template>
<div class="video-cutter">
<div class="video-content">
<video-player />
<div class="video-cutter">
<div class="video-cutter">
<div class="video-content">
<VideoPlayer
@currentTime="changeTime"
@end="playEnd"
/>
<video-player />
<div class="video-cutter">
<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 class="video-btn">
<videoChange @changeVideo="changeVideo" />
<videoControl
:duration="duration"
:now-time="nowTime"
@play="videoPlay"
/>
<div />
</div>
<div />
<div />
</div>
</div>
</div>
</template>
<script>
......@@ -31,55 +31,55 @@ import VideoChange from '@/components/videoCutter/videoChange.vue'
import VideoControl from '@/components/videoCutter/videoControl.vue'
export default {
name: 'VideoCutter',
components: {
VideoPlayer,
VideoChange,
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')
name: 'VideoCutter',
components: {
VideoPlayer,
VideoChange,
VideoControl
},
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
data() {
return {
name: '',
nowTime: 0,
duration: 0,
playing: false,
canPlay: false
}
}
this.playing = !this.playing
this.$bus.emit('videoPlayer.play', ob)
},
changeTime(data) {
console.log(data)
created() {},
mounted() {
this.$bus.on('videoCutter.canPlay', this.canPlayFunc)
},
playEnd() {
this.playing = false
this.nowTime = this.duration
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
}
}
}
}
</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