// 播放音乐
playMusic(){
this.playing = true;
this.autoPlaying = true;
// 创建audio标签
this.audio = new Audio();
this.audio.src = "http://eveningwater.com/project/newReact-music-player/audio/%E9%BB%84%E5%9B%BD%E4%BF%8A%20-%20%E7%9C%9F%E7%88%B1%E4%BD%A0%E7%9A%84%E4%BA%91.mp3";
this.audio.loop = 'loop';
this.audio.autoplay = 'autoplay';
this.$refs.music.appendChild(this.audio);
},
// 跳过动画
skipAnimationFun(e){
e.preventDefault();
this.$emit('on-skip');
},
// 暂停动画
pauseFun(e){
e.preventDefault();
this.paused = !this.paused;
this.$emit('on-pause',this.paused);
},
// 暂停音乐
musicPause(){
this.playing = !this.playing;
if(!this.playing){
this.audio.pause();
}else{
this.audio.play();
}
}
}
}
</script>
<style scoped>
#bottom{
position:fixed;
bottom:5px;
left:0;
right:0;
}
#bottom p{
float:right;
}
#bottom a{
text-decoration: none;
color: #999;
cursor:pointer;
margin-left:5px;
}
#bottom a:hover,#bottom a:active{
color: #010a11;
}
</style>
接下来是核心 APP.vue 组件代码:
<template>
<div id="app">
<div class="main">
<StyleEditor ref="styleEditor" v-bind.sync="currentStyle"></StyleEditor>
<ResumeEditor ref="resumeEditor" :markdown = "currentMarkdown" :enableHtml="enableHtml"></ResumeEditor>
</div>
<BottomNav ref ="bottomNav" @on-pause="pauseAnimation" @on-skip="skipAnimation"></BottomNav>
</div>
</template>
<script>
import ResumeEditor from './components/resumeEditor'
import StyleEditor from './components/styleEditor'
import BottomNav from './components/bottomNav'
import './assets/common.css'
import fullStyle from './style.js'
import my from './my.js'
export default {
name: 'app',
components: {
ResumeEditor,
StyleEditor,
BottomNav
},
data() {
return {
interval: 40,//写入字的速度
currentStyle: {
code: ''
},
enableHtml: false,//是否打造成HTML网页
fullStyle: fullStyle,
currentMarkdown: '',
fullMarkdown: my,
timer: null
}
},
created() {
this.makeResume();
},
methods: {
// 暂停动画
pauseAnimation(bool) {
if(bool && this.timer){
clearTimeout(this.timer);
}else{
this.makeResume();
}
},
// 快速跳过动画
skipAnimation(){
if(this.timer){
