Skip to content

M
mould-vuecli3
Commit c70f4cbe authored by lilei's avatar lilei
Browse files
Options

格式

parents 492c6043 1eba1ab8
Hide whitespace changes
Inline Side-by-side
Showing with 315 additions and 67 deletions
.eslintrc.js
View file @ c70f4cbe
......@@ -10,7 +10,7 @@ module.exports = {
// 3: ESLint + Standard config
// extends: [ 'plugin:vue/essential', '@vue/airbnb',],
// ESLint + Prettier
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
extends: ['plugin:vue/recommended', 'eslint:recommended'],
plugins: [],
parserOptions: {
parser: 'babel-eslint'
......@@ -27,6 +27,27 @@ module.exports = {
// "prettier/prettier": "warn",
// "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
'no-console': [0, { llow: ['warn', 'error'] }],
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
indent: [
'error',
4,
{
SwitchCase: 1,
flatTernaryExpressions: true
}
],
'comma-dangle': ['error', 'never'],
quotes: ['error', 'single'],
'vue/html-indent': [
'error',
4,
{
attribute: 1,
baseIndent: 1,
closeBracket: 0,
alignAttributesVertically: true,
ignores: []
}
]
}
}
src/App.vue
View file @ c70f4cbe
<template>
<div id="app">
<common-header></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>
<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')
},
......@@ -37,6 +40,7 @@ export default {
display: flex;
flex-direction: column;
height: 100vh;
position: relative;
}
.body-container {
......
src/components/header/index.vue
View file @ c70f4cbe
<template>
<div class="comp-commonheader">
<h1>LAIHUA</h1>
<div class="current-page">当前的宝</div>
<tip-panel></tip-panel>
<div class="current-page">
当前的宝
</div>
<tip-panel />
<div
class="show-modal"
@click="showModal"
>
show-modal
</div>
</div>
</template>
......@@ -15,7 +23,12 @@ export default {
return {}
},
created() {},
mounted() {}
mounted() {},
methods: {
showModal() {
this.$modal.show('selectModal')
}
}
}
</script>
......
src/components/misc/tutorialContent.vue 0 → 100644
View file @ c70f4cbe
<template>
<div />
</template>
<script>
export default {
data() {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped></style>
src/components/modal/completeContent.vue 0 → 100644
View file @ c70f4cbe
<template>
<div>
complete content
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped></style>
src/components/modal/completeModal.vue 0 → 100644
View file @ c70f4cbe
<template>
<modal
name="completeModal"
:click-to-close="false"
>
<complete-content />
</modal>
</template>
<script>
import CompleteContent from './completeContent'
export default {
components: {
CompleteContent
},
data() {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped></style>
src/components/modal/modalLayer.vue 0 → 100644
View file @ c70f4cbe
<template>
<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: {}
}
</script>
<style lang="scss" scoped>
.modal-layer {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}
</style>
src/components/modal/selectContent.vue 0 → 100644
View file @ c70f4cbe
<template>
<div>
<div
class="close-btn"
@click="close"
>
close
</div>
选择视频
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
close() {
this.$modal.hide('selectModal')
}
}
}
</script>
<style lang="scss" scoped></style>
src/components/modal/selectModal.vue 0 → 100644
View file @ c70f4cbe
<template>
<modal
name="selectModal"
:click-to-close="false"
>
<select-content />
</modal>
</template>
<script>
import SelectContent from './selectContent'
export default {
components: {
SelectContent
},
data() {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped></style>
src/components/rightPanel/index.vue
View file @ c70f4cbe
<template>
<div class="comp-rightpanel">
<router-view name="panel"></router-view>
<router-view name="panel" />
</div>
</template>
......
src/components/sideNav/index.vue
View file @ c70f4cbe
<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>
<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>
......
src/components/videoCutter/videoChange.vue
View file @ c70f4cbe
<template>
<div class="video-change" @click="changeVideo">
<div
class="video-change"
@click="changeVideo"
>
替换视频
</div>
</template>
......
src/components/videoCutter/videoControl.vue
View file @ c70f4cbe
<template>
<div class="video-control">
<div class="video-play-btn" @click="play()">播放</div>
<div
class="video-play-btn"
@click="play()"
>
播放
</div>
<div class="video-time-content">
<div class="now-time">{{ nowTime | formatTime }}</div>
<div class="now-time">
{{ nowTime | formatTime }}
</div>
<span>/</span>
<div class="total-time">{{ duration | formatTime }}</div>
<div class="total-time">
{{ duration | formatTime }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
props: ['duration', 'nowTime'],
methods: {
play() {
this.$emit('play')
}
},
filters: {
formatTime(duration) {
if (duration <= 0) return '00:00'
......@@ -31,6 +31,15 @@ export default {
sec = sec || '00'
return min + ':' + sec
}
},
props: ['duration', 'nowTime'], // eslint-disable-line
data() {
return {}
},
methods: {
play() {
this.$emit('play')
}
}
}
</script>
......
src/components/videoCutter/videoPlayer.vue
View file @ c70f4cbe
<template>
<div class="video-player">
<video ref="videoDom" src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"></video>
<video
ref="videoDom"
src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"
/>
</div>
</template>
<script>
......@@ -33,6 +36,10 @@ export default {
})
})
},
beforeDestroy() {
this.$refs.videoDom.removeEventListener('canplay')
this.$refs.videoDom.removeEventListener('ended')
},
methods: {
canPlayFunc() {
this.canPlay = true
......@@ -51,10 +58,6 @@ export default {
if (!this.canPlay) return
this.$refs.videoDom.currentTime = time
}
},
beforeDestroy() {
this.$refs.videoDom.removeEventListener('canplay')
this.$refs.videoDom.removeEventListener('ended')
}
}
</script>
......
src/views/screenshot.vue
View file @ c70f4cbe
<template>
<div class="screenshot">
<div class="content">
<video id="screenshot-video"></video>
<video id="screenshot-video" />
</div>
<div class="operate-area">
<input id="screenshot-input" type="file" style="display:none;" />
<input
id="screenshot-input"
type="file"
style="display:none;"
>
</div>
</div>
</template>
......
src/views/videoConverter.vue
View file @ c70f4cbe
<template>
<div class="videoConverter">
<ul>
<li v-for="(item, index) in taskList" :key="index">
<li
v-for="(item, index) in taskList"
:key="index"
>
<div class="info">
<div class="cove">视频封面</div>
<div class="cove">
视频封面
</div>
<div>
<div>{{ item.name }}.mp4</div>
<div>时长:{{ item.duration }}</div>
</div>
</div>
<div class="operationPanel">
<div class="wait" v-show="item.state == 0">
<div
v-show="item.state == 0"
class="wait"
>
<div>输出格式</div>
<div class="selectionFormat">mp4</div>
<div class="delete" @click="clearTask(item)">删除</div>
<div class="selectionFormat">
mp4
</div>
<div
class="delete"
@click="clearTask(item)"
>
删除
</div>
</div>
<div class="active" v-show="item.state == 1">
<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="stop" @click="stopTask(item)">取消</div>
<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
class="addVideo"
@click="addVideo"
>
添加视频
</div>
<div
class="clearList"
@click="clearAllTasks"
>
清空列表
</div>
<div class="clearWatermark">
去除水印
</div>
</div>
<div class="startAll" @click="startAllTasks">开始转换</div>
<div
class="startAll"
@click="startAllTasks"
>
开始转换
</div>
</div>
</template>
......@@ -51,6 +91,18 @@ export default {
},
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({
......@@ -79,18 +131,6 @@ export default {
task.state = 1
})
}
},
created() {
for (let i = 1; i < 10; i++) {
this.taskList.push({
cover: '',
name: '视频片段' + i,
duration: '10:00',
state: 0,
progress: 60,
outputFormat: 'mp4'
})
}
}
}
</script>
......
src/views/videoCutter.vue
View file @ c70f4cbe
<template>
<div class="video-cutter">
<div class="video-content">
<VideoPlayer @currentTime="changeTime" @end="playEnd" @timeupdate="timeupdate" />
<VideoPlayer
@currentTime="changeTime"
@end="playEnd"
@timeupdate="timeupdate"
/>
</div>
<div class="video-btn">
<videoChange @changeVideo="changeVideo" />
<videoControl :duration="duration" :nowTime="nowTime" @play="videoPlay" />
<div></div>
<videoControl
:duration="duration"
:now-time="nowTime"
@play="videoPlay"
/>
<div />
</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',
data() {
return {
name: '',
......
vue.config.js
View file @ c70f4cbe
......@@ -8,7 +8,7 @@
* @
*/
// console.log(`process.env1:`, process.env);
console.log(`process.env.NODE_ENV1:`, process.env.NODE_ENV)
console.log('process.env.NODE_ENV1:', process.env.NODE_ENV)
module.exports = {
// outputDir: process.env.outputDir,
......@@ -43,7 +43,7 @@ module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/assets/style/index.scss";`
prependData: '@import "@/assets/style/index.scss";'
}
}
}
......
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