Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
M
mould-vuecli3
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lhfe
mould-vuecli3
Commits
1eba1ab8
Commit
1eba1ab8
authored
Aug 27, 2020
by
Jeff
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
更新规则
parent
41c24d83
Hide whitespace changes
Inline
Side-by-side
Showing
29 changed files
with
564 additions
and
553 deletions
+564
-553
.editorconfig
.editorconfig
+1
-1
.eslintrc.js
.eslintrc.js
+13
-2
App.vue
src/App.vue
+22
-22
index.vue
src/components/header/index.vue
+24
-24
tipPanel.vue
src/components/header/tipPanel.vue
+8
-8
tutorialContent.vue
src/components/misc/tutorialContent.vue
+5
-5
completeContent.vue
src/components/modal/completeContent.vue
+7
-7
completeModal.vue
src/components/modal/completeModal.vue
+13
-13
modalLayer.vue
src/components/modal/modalLayer.vue
+12
-12
selectContent.vue
src/components/modal/selectContent.vue
+15
-15
selectModal.vue
src/components/modal/selectModal.vue
+13
-13
index.vue
src/components/rightPanel/index.vue
+8
-8
screenshotPanel.vue
src/components/rightPanel/screenshotPanel.vue
+8
-8
index.vue
src/components/sideNav/index.vue
+22
-22
videoChange.vue
src/components/videoCutter/videoChange.vue
+10
-10
videoControl.vue
src/components/videoCutter/videoControl.vue
+36
-36
videoPlayer.vue
src/components/videoCutter/videoPlayer.vue
+51
-51
main.js
src/main.js
+3
-3
registerServiceWorker.js
src/registerServiceWorker.js
+23
-23
index.js
src/router/index.js
+32
-32
global.js
src/store/global.js
+6
-6
index.js
src/store/index.js
+4
-4
moduleA.js
src/store/modules/moduleA.js
+7
-7
About.vue
src/views/About.vue
+3
-3
bao2.vue
src/views/bao2.vue
+8
-8
bao3.vue
src/views/bao3.vue
+9
-9
screenshot.vue
src/views/screenshot.vue
+19
-19
videoConverter.vue
src/views/videoConverter.vue
+117
-117
videoCutter.vue
src/views/videoCutter.vue
+65
-65
No files found.
.editorconfig
View file @
1eba1ab8
...
...
@@ -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
...
...
.eslintrc.js
View file @
1eba1ab8
...
...
@@ -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
:
[]
}
]
}
}
src/App.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/header/index.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/header/tipPanel.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/misc/tutorialContent.vue
View file @
1eba1ab8
<
template
>
<div
/>
<div
/>
</
template
>
<
script
>
export
default
{
data
()
{
return
{}
},
methods
:
{}
data
()
{
return
{}
},
methods
:
{}
}
</
script
>
...
...
src/components/modal/completeContent.vue
View file @
1eba1ab8
<
template
>
<div>
complete content
</div>
<div>
complete content
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{}
},
methods
:
{}
data
()
{
return
{}
},
methods
:
{}
}
</
script
>
...
...
src/components/modal/completeModal.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/modal/modalLayer.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/modal/selectContent.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/modal/selectModal.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/rightPanel/index.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/rightPanel/screenshotPanel.vue
View file @
1eba1ab8
<
template
>
<div>
screenshotPanel
</div>
<div>
screenshotPanel
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{}
},
created
()
{},
mounted
()
{}
data
()
{
return
{}
},
created
()
{},
mounted
()
{}
}
</
script
>
...
...
src/components/sideNav/index.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/videoCutter/videoChange.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/videoCutter/videoControl.vue
View file @
1eba1ab8
<
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
>
...
...
src/components/videoCutter/videoPlayer.vue
View file @
1eba1ab8
<
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
>
...
...
src/main.js
View file @
1eba1ab8
...
...
@@ -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'
)
src/registerServiceWorker.js
View file @
1eba1ab8
...
...
@@ -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
)
}
})
}
src/router/index.js
View file @
1eba1ab8
...
...
@@ -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
src/store/global.js
View file @
1eba1ab8
...
...
@@ -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
}
src/store/index.js
View file @
1eba1ab8
...
...
@@ -7,8 +7,8 @@ import moduleA from './modules/moduleA'
Vue
.
use
(
Vuex
)
export
default
new
Vuex
.
Store
({
...
global
,
modules
:
{
moduleA
}
...
global
,
modules
:
{
moduleA
}
})
src/store/modules/moduleA.js
View file @
1eba1ab8
...
...
@@ -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
}
src/views/About.vue
View file @
1eba1ab8
<
template
>
<div
class=
"about"
>
<h1>
This is an about page
</h1>
</div>
<div
class=
"about"
>
<h1>
This is an about page
</h1>
</div>
</
template
>
src/views/bao2.vue
View file @
1eba1ab8
<
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
>
...
...
src/views/bao3.vue
View file @
1eba1ab8
<
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
>
...
...
src/views/screenshot.vue
View file @
1eba1ab8
<
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
>
...
...
src/views/videoConverter.vue
View file @
1eba1ab8
<
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
>
...
...
src/views/videoCutter.vue
View file @
1eba1ab8
<
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
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment