Vue+JS+layUI 完成预览模式功能

简介: Vue+JS+layUI 完成预览模式功能

1.预览模式

更新站点:java小白翻身官网(网址:java18.cn)


更新原因:方便浏览文章,和步骤阅读法相得益彰。


更新内容:PC端在具体的教程页面,目录下方增加一个预览模式的按钮。


点击后会打开一个窗口,里面就是当前的教程,我进行了重新排版。


37d6d1d0955d34931b74fb9c8323467f.png


效果如下:


c289e19514fcac4882d2dfad09093063.png


因为用了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')
    });
},
相关文章
|
1天前
|
JavaScript 前端开发
JavaScript实现识别二维码信息功能
JavaScript实现识别二维码信息功能
7 1
|
1天前
|
JavaScript
js实现全屏功能——易懂版
js实现全屏功能——易懂版
5 0
|
1天前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
6 1
|
2天前
|
存储 JavaScript 前端开发
使用vue实现一个添加和编辑的功能
使用vue实现一个添加和编辑的功能
9 1
|
10天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】JavaScript与TypeScript混合编程模式探讨
【4月更文挑战第30天】本文探讨了在前端开发中JavaScript与TypeScript的混合编程模式。TypeScript作为JavaScript的超集,提供静态类型检查等增强功能,但完全切换往往不现实。混合模式允许逐步迁移,保持项目稳定性,同时利用TypeScript的优点。通过文件扩展名约定、类型声明文件和逐步迁移策略,团队可以有效结合两者。团队协作与沟通在此模式下至关重要,确保代码质量与项目维护性。
|
10天前
|
JavaScript 前端开发 API
如何利用JavaScript和Electron构建具有丰富功能的桌面应用
【4月更文挑战第30天】如何利用JavaScript和Electron构建具有丰富功能的桌面应用
5 0
|
11天前
|
JavaScript 前端开发
实现一个JavaScript动态日期功能
实现一个JavaScript动态日期功能
|
11天前
|
JavaScript 前端开发
JavaScript模糊搜索功能
JavaScript模糊搜索功能
|
11天前
|
JavaScript 前端开发
JavaScript三级联动功能
JavaScript三级联动功能
|
11天前
|
JavaScript
JS实现分页功能
JS实现分页功能