</div>
</template>
<script>
import Prism from 'prismjs'
export default {
name:'Editor',
props:['code'],
computed:{
highlightedCode:function(){
//代码高亮
return Prism.highlight(this.code,Prism.languages.css);
},
// 让代码生效
codeInstyleTag:function(){
return `<style>${this.code}</style>`
}
},
methods:{
//每次打字到最底部，就要滚动
goBottom(){
this.$refs.container.scrollTop = 10000;
},
//代码修改之后，可以重新生效
updateCode(e){
this.$emit('update:code',e.target.textContent);
}
}
}
</script>
<style scoped>
.code{
display:none;
}
</style>
新建一个 resumeEditor.vue 组件,
<template>
<div class = "resumeEditor" :class="{htmlMode:enableHtml}" ref = "container">
<div v-if="enableHtml" v-html="result"></div>
<pre v-else>{{result}}</pre>
</div>
</template>
<script>
import marked from 'marked'
export default {
props:['markdown','enableHtml'],
name:'ResumeEditor',
computed:{
result:function(){
return this.enableHtml ? marked(this.markdown) : this.markdown
}
},
methods:{
goBottom:function(){
this.$refs.container.scrollTop = 10000
}
}
}
</script>
<style scoped>
.htmlMode{
anmation:flip 3s;
}
@keyframes flip{
0%{
opactiy:0;
}
100%{
opactiy:1;
}
}
</style>新建一个底部导航菜单组件 bottomNav.vue ,
<template>
<div id="bottom">
<a id="pause" @click="pauseFun">{{ !paused ? '暂停动画' : '继续动画 ||' }}</a>
<a id="skipAnimation" @click="skipAnimationFun">跳过动画</a>
<p>
<span v-for="(url,index) in demourl" :key="index">
<a :href="url.url" rel="external nofollow" >{{ url.title }}</a>
</span>
</p>
<div id="music" @click="musicPause" :class="playing ? 'rotate' : ''" ref="music"></div>
</div>
</template>
<script>
export default{
name:'bottom',
data(){
return{
demourl:[
{url:'http://eveningwater.com/',title:'个人网站'},
{url:'https://github.com/eveningwater',title:'github'}
],
paused:false,//暂停
playing:false,//播放图标动画
autoPlaying:false,//播放音频
audio:''
}
},
mounted(){ },
methods:{
