1.预览模式
更新站点:java小白翻身官网(网址:java18.cn)
更新原因:方便浏览文章,和步骤阅读法相得益彰。
更新内容:PC端在具体的教程页面,目录下方增加一个预览模式的按钮。
点击后会打开一个窗口,里面就是当前的教程,我进行了重新排版。
效果如下:
因为用了vue,我就不需要再重新后台写接口了,改一下html就搞定。
关键代码:
<div style="height:30px;">
<el-button @click="openPreview" style="float:right;margin-right:10px;">预览模式</el-button>
</div>
<div id="preview" style="display:none;margin:20px;font-size:15px;margin: 0em 1em 0em 1em !important;">
<div v-for="item in steps">
<h2 style="color:green;text-align:center;">{{item.stepNum}}.{{item.name}}</h2>
<div class="step_content" v-html="item.content" v-highlight></div>
</div>
</div>
JS:
openPreview: function(){
this.layerId = layer.open({
type : 1,
area : [ '800px', '600px' ],
content : $('#preview')
});
},
|