Skip to content

M
mould-vuecli3
Commit b079077d authored by gaobowen's avatar gaobowen
Browse files
Options

screenshot

parents 24f3f8fe c70f4cbe
Show whitespace changes
Inline Side-by-side
Showing with 653 additions and 40 deletions
.eslintrc.js
View file @ b079077d
...@@ -10,7 +10,7 @@ module.exports = { ...@@ -10,7 +10,7 @@ module.exports = {
// 3: ESLint + Standard config // 3: ESLint + Standard config
// extends: [ 'plugin:vue/essential', '@vue/airbnb',], // extends: [ 'plugin:vue/essential', '@vue/airbnb',],
// ESLint + Prettier // ESLint + Prettier
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'], extends: ['plugin:vue/recommended', 'eslint:recommended'],
plugins: [], plugins: [],
parserOptions: { parserOptions: {
parser: 'babel-eslint' parser: 'babel-eslint'
...@@ -27,6 +27,27 @@ module.exports = { ...@@ -27,6 +27,27 @@ module.exports = {
// "prettier/prettier": "warn", // "prettier/prettier": "warn",
// "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
'no-console': [0, { llow: ['warn', 'error'] }], '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: []
}
]
} }
} }
README.md
View file @ b079077d
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
## 项目介绍 ## 项目介绍
> node 12.18.3 > node 8.11.0+ (推荐12.18.3)
> npm 6.14.6 > npm 6.14.6
来画工具宝 来画工具宝
......
src/App.vue
View file @ b079077d
<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> <router-view style="flex:1;border: 1px solid #666;" />
<right-panel></right-panel> <right-panel />
</body> </body>
<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'
export default { export default {
components: { components: {
CommonHeader, CommonHeader,
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')
}, },
...@@ -21,7 +24,6 @@ export default { ...@@ -21,7 +24,6 @@ export default {
return {} return {}
}, },
async created() { async created() {
console.log('this.$http:', this.$http)
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)
} }
...@@ -38,11 +40,13 @@ export default { ...@@ -38,11 +40,13 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
position: relative;
} }
.body-container { .body-container {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
overflow: hidden;
} }
</style> </style>
src/components/header/index.vue
View file @ b079077d
<template> <template>
<div class="comp-commonheader"> <div class="comp-commonheader">
<h1>LAIHUA</h1> <h1>LAIHUA</h1>
<div class="current-page">当前的宝</div> <div class="current-page">
<tip-panel></tip-panel> 当前的宝
</div>
<tip-panel />
<div class="show-modal" @click="showModal">
show-modal
</div>
</div> </div>
</template> </template>
...@@ -15,7 +20,12 @@ export default { ...@@ -15,7 +20,12 @@ export default {
return {} return {}
}, },
created() {}, created() {},
mounted() {} mounted() {},
methods: {
showModal() {
this.$modal.show('selectModal')
}
}
} }
</script> </script>
......
src/components/misc/tutorialContent.vue 0 → 100644
View file @ b079077d
<template>
<div />
</template>
<script>
export default {
data() {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped></style>
src/components/modal/completeContent.vue 0 → 100644
View file @ b079077d
<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 @ b079077d
<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 @ b079077d
<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 @ b079077d
<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 @ b079077d
<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 @ b079077d
<template> <template>
<div class="comp-rightpanel"> <div class="comp-rightpanel">
<router-view name="panel"></router-view> <router-view name="panel" />
</div> </div>
</template> </template>
......
src/components/sideNav/index.vue
View file @ b079077d
<template> <template>
<div class="comp-sidenav"> <div class="comp-sidenav">
<router-link to="/">Home</router-link> <router-link to="/">
<router-link to="/about">About</router-link> Home
<router-link to="/cutter">cutter</router-link> </router-link>
<router-link to="/videoConverter">videoConverter</router-link> <router-link to="/about">
<router-link to="/screenshot">screenshot</router-link> 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>
</template> </template>
......
src/components/videoCutter/videoChange.vue 0 → 100644
View file @ b079077d
<template>
<div class="video-change" @click="changeVideo">
替换视频
</div>
</template>
<script>
export default {
methods: {
changeVideo() {
this.$emit('changeVideo')
}
}
}
</script>
<style lang="scss" scoped>
.video-change {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #dddddd;
border-radius: 4px;
user-select: none;
cursor: pointer;
}
</style>
src/components/videoCutter/videoControl.vue 0 → 100644
View file @ b079077d
<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>
</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
}
},
props: ['duration', 'nowTime'], // eslint-disable-line
data() {
return {}
},
methods: {
play() {
this.$emit('play')
}
}
}
</script>
<style lang="scss" scoped>
.video-control {
display: flex;
justify-content: flex-start;
align-self: center;
width: 200px;
user-select: none;
}
.video-play-btn {
border: 1px solid #dddddd;
width: 30px;
height: 30px;
border-radius: 100%;
margin-right: 10px;
cursor: pointer;
}
.video-time-content {
display: flex;
> div,
span {
line-height: 30px;
color: #474261;
}
}
</style>
src/components/videoCutter/videoPlayer.vue
View file @ b079077d
<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> <video ref="videoDom" src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4" />
</div> </div>
</template> </template>
<script> <script>
...@@ -14,19 +14,46 @@ export default { ...@@ -14,19 +14,46 @@ export default {
}, },
mounted() { mounted() {
this.$bus.on('videoPlayer.play', (data) => { this.$bus.on('videoPlayer.play', (data) => {
console.log(data) if (data.time !== undefined) {
// if(data.state) this.currentTime(data.time)
}
if (data.play) {
this.play()
} else {
this.pause()
}
}) })
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.videoDom.addEventListener('canplay', () => { this.$refs.videoDom.addEventListener('canplay', this.canPlayFunc)
this.canPlay = true 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')
}, },
methods: { methods: {
canPlayFunc() {
this.canPlay = true
let from = this.$parent.$options.name || 'videoPlayer'
this.$bus.emit(`${from}.canPlay`, this.$refs.videoDom.duration)
},
play() { play() {
if (!this.canPlay) return if (!this.canPlay) return
this.$refs.videoDom.play() this.$refs.videoDom.play()
},
pause() {
if (!this.canPlay) return
this.$refs.videoDom.pause()
},
currentTime(time) {
if (!this.canPlay) return
this.$refs.videoDom.currentTime = time
} }
} }
} }
......
src/store/global.js 0 → 100644
View file @ b079077d
// 全局vuex信息
// getter调用示例：this.$store.getters['test']
const state = {
_test: 1
}
const getters = {
test: (state) => state._test
}
const mutations = {}
const actions = {}
export default {
state,
getters,
mutations,
actions
}
src/store/index.js
View file @ b079077d
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import global from './global'
import moduleA from './modules/moduleA'
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: {}, ...global,
mutations: {}, modules: {
actions: {}, moduleA
modules: {} }
}) })
src/store/modules/moduleA.js 0 → 100644
View file @ b079077d
// 模块化vuex数据
// getter调用示例：this.$store.getters['moduleA/moduleState']
const state = {
_moduleState: 'moduleState'
}
const getters = {
moduleState: (state) => state._moduleState
}
const mutations = {}
const actions = {}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
src/views/videoConverter.vue
View file @ b079077d
<template> <template>
<div class="videoConverter">转换baby</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="addVideo" @click="addVideo">
添加视频
</div>
<div class="clearList" @click="clearAllTasks">
清空列表
</div>
<div class="clearWatermark">
去除水印
</div>
</div>
<div class="startAll" @click="startAllTasks">
开始转换
</div>
</div>
</template> </template>
<script> <script>
...@@ -8,20 +61,186 @@ export default { ...@@ -8,20 +61,186 @@ export default {
components: {}, components: {},
props: {}, props: {},
data() { data() {
return {} return {
taskList: []
}
}, },
computed: {}, computed: {},
watch: {}, watch: {},
methods: {} 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() {
this.taskList = []
},
startAllTasks() {
this.taskList.forEach((task) => {
task.state = 1
})
}
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.videoConverter { .videoConverter {
width: 100%; width: 100%;
height: 100%; height: 800px;
background-color: #fff; background-color: #fff;
border: 0px solid black; border: 0px solid black;
margin: 0px; margin: 0px;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
overflow: hidden;
> ul {
width: 100%;
height: 100%;
border: 1px solid black;
flex-grow: 1;
overflow-y: auto;
> li {
padding: 5px 0;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
> li:nth-of-type(odd) {
background-color: gainsboro;
}
.info {
display: flex;
align-items: center;
.cove {
width: 100px;
height: 40px;
background-color: #ccc;
line-height: 40px;
margin-right: 10px;
}
}
.operationPanel {
width: 300px;
height: 100%;
.wait {
height: 100%;
display: flex;
align-items: center;
.selectionFormat {
height: 30px;
width: 100px;
line-height: 30px;
border: 1px solid black;
margin-left: 20px;
}
.delete {
width: 60px;
height: 30px;
line-height: 30px;
background-color: black;
color: #fff;
margin-left: 20px;
}
}
.active {
height: 100%;
width: 300px;
display: flex;
align-items: center;
.progress {
}
.slide {
width: 200px;
height: 5px;
background: gray;
> div {
width: 120px;
height: 100%;
background-color: black;
}
}
.stop {
width: 60px;
height: 30px;
line-height: 30px;
background-color: black;
color: #fff;
margin-left: 20px;
}
}
}
}
.editBar {
position: relative;
height: 30px;
width: 100%;
margin: 20px 0;
.addVideo {
position: absolute;
left: 0;
height: 30px;
line-height: 30px;
border: 1px solid black;
}
.clearList {
position: absolute;
left: 100px;
height: 30px;
line-height: 30px;
border: 1px solid black;
}
.clearWatermark {
position: absolute;
right: 0;
height: 30px;
line-height: 30px;
border: 1px solid black;
}
}
.startAll {
height: 30px;
width: 100px;
background-color: black;
color: #fff;
line-height: 30px;
}
} }
</style> </style>
src/views/videoCutter.vue
View file @ b079077d
<template> <template>
<div class="video-cutter"> <div class="video-cutter">
<div class="video-content"> <div class="video-content">
<video-player></video-player> <VideoPlayer @currentTime="changeTime" @end="playEnd" @timeupdate="timeupdate" />
</div> </div>
<div></div> <div class="video-btn">
<div></div> <videoChange @changeVideo="changeVideo" />
<div></div> <videoControl :duration="duration" :now-time="nowTime" @play="videoPlay" />
<div />
</div>
<div />
<div />
</div> </div>
</template> </template>
<script> <script>
import VideoPlayer from '@/components/videoCutter/videoPlayer.vue'
export default { export default {
name: 'VideoCutter',
components: { components: {
VideoPlayer VideoPlayer: () => import('@/components/videoCutter/videoPlayer.vue'),
VideoChange: () => import('@/components/videoCutter/videoChange.vue'),
VideoControl: () => import('@/components/videoCutter/videoControl.vue')
}, },
data() { data() {
return { return {
name: '' name: '',
nowTime: 0,
duration: 0,
playing: false,
canPlay: false
} }
}, },
created() {}, created() {},
mounted() {} mounted() {
this.$bus.on('videoCutter.canPlay', this.canPlayFunc)
},
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
}
}
} }
</script> </script>
...@@ -35,4 +80,8 @@ export default { ...@@ -35,4 +80,8 @@ export default {
width: 100%; width: 100%;
height: 700px; height: 700px;
} }
.video-btn {
display: flex;
justify-content: space-between;
}
</style> </style>
vue.config.js
View file @ b079077d
/*
* @Date: 2020-08-27 09:05:54
* @LastEditors: OBKoro1
* @LastEditTime: 2020-08-27 15:30:17
* @FilePath: /vue.config.js
* @Description: 描述
* @Author: huacong
* @
*/
// console.log(`process.env1:`, process.env); // 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 = { module.exports = {
// outputDir: process.env.outputDir, // outputDir: process.env.outputDir,
...@@ -34,7 +43,7 @@ module.exports = { ...@@ -34,7 +43,7 @@ module.exports = {
css: { css: {
loaderOptions: { loaderOptions: {
sass: { 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