marked 用户手册在线查看

npm install marked --save

要求写一个在线的用户手册，样式

<template><div id="help"><!-- <header></header> --><div id="help-aside"><div id="help-aside-1"><span class="xian"></span><span class="zi">帮助索引</span><span class="xian"></span></div><ul v-for="(item,idx) in sideData" id="help-tree" :key="idx"><li @click="clickMenu(item.name,item,$event)"><spanv-show="item.children&&!item.collapse"class="icon-add"@click="item.collapse=!item.collapse"></span><spanv-show="item.children&&item.collapse"class="icon-minus"@click="item.collapse=!item.collapse"></span><spanv-show="urlName==item.name&&!item.children"class="icon-click"@click="item.collapse=!item.collapse"></span><span class="sidetxt">{{item.label}}</span><ul v-for="(item1,idx1) in item.children" :key="idx1" v-show="item.collapse"><li @click="clickMenu(item1.name,item1,$event)"><spanv-show="urlName==item1.name&&!item1.children"class="icon-click"@click="item1.collapse=!item1.collapse"></span><spanclass="sidetxt":class="{ clicktxt:urlName==item1.name&&!item1.children}">{{item1.label}}</span><ul v-for="(item2,idx2) in item1.children" :key="idx2"><li @click="clickMenu(item2.name,item2,$event)"><span style="margin-left:36px;font-size:16px;">{{item2.label}}</span><ul v-for="(item3,idx3) in item2.children" :key="idx3"><li @click="clickMenu(item3.name,item3,$event)"><span class="sidetxt" style="margin-left:50px;font-size:14px;">{{item3.label}}</span><ul v-for="(item4,idx4) in item3.children" :key="idx4"><li @click="clickMenu(item4.name,item4,$event)"><spanclass="sidetxt"style="margin-left:65px;font-size:14px;">{{item4.label}}</span></li></ul></li></ul></li></ul></li></ul></li></ul></div><div id="help-content" v-show="!isAvi"><!--<vue-markdown>{{mdString}}</vue-markdown>--><div style="width:80%;height:97%;margin:0 auto;"><divv-html="compiledMarkdown"style="text-align: center;padding-top: 100px;"v-if="$route.query.name == 'help'"></div><div v-html="compiledMarkdown" v-if="$route.query.name != 'help'"></div><div id="help-content-foot" v-if="$route.query.name == 'help'"><div style="height: 550px;line-height: 60px; font-weight: 600; font-size: 30px;">应急管理系统普查任务清查工作手册</div><div style="height: 40px;">应急管理部</div><div>2020年6月</div></div></div><div id="backToBtn" @click="backToTop"></div></div><div v-if="isAvi" id="player-container"><player-view :tag="urlName" :label="tagName"></player-view></div></div>
</template>
<script>
import axios from "axios";
// import VueMarkdown from "vue-markdown"; // production
import marked from "marked";
import Header from "../index/children/header";
export default {name: "help",components: {// VueMarkdown,marked,Header},data() {return {sideTheme: "light", //侧边栏样式sideData: [], //侧边栏数据mdString: "#  全国自然灾害综合风险普查",urlName: "", //url的组件名称urlOrigin: "", //urltagName: "", //tag,isAvi: false};},watch: {// $route: function (to, from) {//   if (to.name == from.name) {//     var queryString = to.fullPath.split("?")[1];//     this.urlName = queryString.split("=")[1];//     this.getHelpMd();//   }// }},computed: {compiledMarkdown: function() {return marked(this.mdString, {sanitize: true});},currentRouter: function() {return this.$route.name;}},mounted() {this.getHelpJSON().then(res => {this.sideData = res.data;this.getUrlName(); //初始化获取文件});this.urlOrigin = window.location.origin;// console.log(window.location.hash.split("name=")[1], "window.location.hash");console.log(this.$route.name, "window.location.hash");},methods: {getHelpJSON: function() {return axios({url: "./static/helps/helpmarked/help.json",method: "get"});},getHelpFile: function(tag, name) {let tempURL = "";if (tag) {tempURL = "./static/helps/helpmarked/" + tag + "/" + name + ".md";} else {tempURL = "./static/helps/helpmarked/" + name + ".md";}return axios({url: tempURL,method: "get"});},// 帮助初始化 获取名称getUrlName: function() {// this.sideData = helpMenu;// var obj2 = this.util.getUrlParams();// if (obj2 && obj2.name) {//   this.urlName = obj2.name;//   this.getHelpMd();// } else {//   this.getHelpInit();// }this.getHelpInit();},getHelpInit() {if (typeof this.$route.params.currenturl == "undefined") {this.urlName = "help";} else {this.urlName = this.$route.params.currenturl.name; //获取url名称}this.getHelpMd();},// 请求md文件getHelpMd() {this.getHelpFile(this.tagName, this.urlName).then(data => {//请求文件this.mdString = data.data;});this.$router.push({name: "help",query: {name: this.urlName}});},// 解决侧边栏父子重叠问题clickMenu(name, data, e) {console.log(name, data, e, "clickMenu");//   if (SewisePlayer.doStop) {//     SewisePlayer.doStop();//   }if (data.drop) {let children = null;if (data.children[0].drop) {children = data.children[0].children[0];} else {children == data.children[0];}this.urlName = children.name;this.tagName = children.tag;} else {this.urlName = data.name;this.tagName = data.tag;}if (data.label.indexOf(".avi") != -1) {this.isAvi = true;this.$router.push({name: "help",query: {name: this.urlName}});} else {this.isAvi = false;this.getHelpMd();}this.stopPropagation(e);},stopPropagation: function(e) {var e = arguments[0] || e || window.event;if (e.stopPropagation) {//W3C阻止冒泡方法e.stopPropagation();} else {e.cancelBubble = true; //IE阻止冒泡方法}return true;},// 跳转至用户反馈模块 - GYJtoFeedback() {this.$router.push({name: "feedback"});},backToTop() {var container = document.getElementById("help-content");container.scrollTop = 0;}}
};
</script>
<style scoped>
#help {width: 100%;height: 100%;text-align: left;
}
#help img {max-width: 70%;max-height: 70%;display: block;margin: 0 auto;
}
#help-aside {width: 350px;position: absolute;top: 70px;bottom: 0;left: 0;background: #fff;overflow: auto;border-right: 10px solid #ebecf2;
}
#help-aside-1 {width: 260px;height: 30px;margin: 0 auto;margin-top: 10px;margin-bottom: 20px;
}.xian {display: block;float: left;width: 100px;height: 20px;margin-top: 10px;border-bottom: 1px solid rgb(37, 146, 242);
}
.zi {display: block;float: left;width: 60px;height: 20px;margin-top: 20px;color: rgb(37, 146, 242);font-size: 14px;text-align: center;
}
ul,
li {color: #2c3e50;line-height: 26px;list-style: none;
}
#help-tree {width: 260px;margin: 0 auto;margin-top: 10px;/* padding-left: 50px; */
}
#help-content {position: absolute;left: 400px;top: 70px;right: 0px;bottom: 0px;padding: 0 30px;overflow: auto;background-color: #fff;
}
.icon-add {display: inline-block;width: 15px;height: 15px;background: url("../../assets/images/help/help-add.png");cursor: pointer;
}
.icon-minus {display: inline-block;width: 15px;height: 15px;background: url("../../assets/images/help/help-minus.png");cursor: pointer;
}
.icon-click {display: inline-block;width: 7px;height: 10px;background: url("../../assets/images/help/help-arrow.png");cursor: pointer;
}
.clicktxt {color: #2592f2;
}
.sidetxt {margin-left: 5px;font-size: 14px;cursor: pointer;
}
.sidetxt:hover {color: #2592f2;
}#help-content-foot {margin-top: 87px;margin-bottom: 100px;font-size: 17px;margin-left: 200px;padding-bottom: 21px;padding-top: 20px;width: 100%;margin: 0 auto;text-align: center;/* border-top: 1px solid #bbb; */
}
#backToBtn {width: 52px;height: 52px;position: fixed;right: 20px;bottom: 30px;cursor: pointer;background: url("../../assets/images/help/backTo.png");
}
#player-container {position: absolute;left: 390px;top: 0px;right: 0px;bottom: 0px;overflow: auto;background-color: #fff;
}
</style>
<style>
/* 用于帮助的样式 *//* #help img {max-width: 70%;max-height: 70%;margin: 30px 20px 0px;
} */
#help img {max-width: 100%;max-height: 70%;display: block;margin: 0 auto;
}#help img[alt="操作按钮"] {display: inline;line-height: 50px;margin: 0 2px;
}#help img[alt="通知公告"] {display: inline;vertical-align: middle;/* line-height: 50px; */max-width: 100px;/* margin: 0 2px; */
}#help img[alt="删除按钮"] {display: inline;/* line-height: 50px; */margin: 0 2px;
}#help img[alt="普查区按钮"] {display: inline;vertical-align: middle;/* line-height: 50px; */max-width: 100px;/* margin: 0 2px; */
}#help img[alt="用户权限"] {display: inline;vertical-align: middle;/* line-height: 50px; */max-width: 100px;/* margin: 0 2px; */
}#help img[alt="缩放按钮"] {display: inline;margin-left: 50px;vertical-align: middle;
}#help img[alt="切换按钮"] {display: inline;margin-left: 50px;vertical-align: middle;
}#help img[alt="测量面控按钮"] {display: inline;margin-left: 50px;vertical-align: middle;
}#help img[alt="放大按钮"] {display: inline;margin-left: 50px;vertical-align: middle;
}#help img[alt="缩小按钮"] {display: inline;margin-left: 77px;vertical-align: middle;
}#help img[alt="导出导入"] {display: inline;vertical-align: middle;/* line-height: 50px; */max-width: 100px;/* margin: 0 2px; */
}#help img[alt="编辑"] {display: inline;/* margin-left: 50px; */vertical-align: middle;
}#help h1 {font-size: 28px;line-height: 50px;
}#help h2 {margin-left: 20px;font-size: 20px;line-height: 50px;color: #2d8cf0;
}#help h3 {margin-left: 20px;font-size: 16px;line-height: 50px;
}#help h5 {margin-left: 20px;font-size: 14px;color: gray;margin-left: 28%;
}#help h6 {text-align: center;margin-top: 10px;margin-bottom: 15px;
}#help p {margin-left: 20px;font-size: 14px;line-height: 50px;
}#help ul,
#help li {list-style: none;margin-left: 25px;
}#help #help-tree ul,
#help #help-tree li {margin-left: 0px;
}#help code {color: #c7254e;background-color: #f9f2f4;border: 1px solid #ffa500;border-radius: 4px;padding: 3px 5px;
}#help p {text-indent: 2em;
}#help tr {font-size: 14px;
}#help div.sewise-player-ui div.controlbar ul.controlbar-btns {position: absolute;width: 100%;top: 20px;margin: 0 !important;padding: 0 !important;overflow: hidden;list-style-type: none;
}#help .sewise_player_contextmenu_items {display: none;
}
</style>

在static下的目录

其中一个md 的文件

# 6 清查地图使用
---
（1）查询清查对象信息：可以通过【清查对象地图】进行信息查询。例如：点击【地区】下的“北京市”，【类别】下的“自然灾害承灾体”“公共服务设施”“学校”来查询北京市的学校目录；还可以通过关键字输入查询具体调查对象。（2）通过查看【地图】【影像】【地形】三种模式的底图，方便核对清查对象点位信息。（3）查看清查机构：使用【清查机构管理】，省、市、县可查看清查机构树状结构，县级用户可创建清查机构。![图3-23](static/helps/helpimgs/3-23.png)![图3-24](static/helps/helpimgs/3-24.png)![图3-25](static/helps/helpimgs/3-25.png)![图3-26](static/helps/helpimgs/3-26.png)![图3-27](static/helps/helpimgs/3-27.png)![图3-28](static/helps/helpimgs/3-28.png)![图3-29](static/helps/helpimgs/3-29.png)######  图6-1 清查地图使用界面

help.json

[{"label": "一、 清查软件实操","name": "xitong_1","collapse": true,"children": [{"label": "(一).系统登录","tag": "xitong","name": "xitong_1"},{"label": "(二) 用户管理","tag": "yongh","name": "yongh_1"},{"label": "(三) 批量导入方式","tag": "pldrfs","name": "pldrfs_1"},{"label": "(四) 逐项填报方式","tag": "zxtbfs","name": "zxtbfs_1"},{"label": "(五) 数据审核、上报、修改","tag": "sjsh","name": "sjsh_1"},{"label": "(六) 清查地图使用","tag": "dtsy","name": "dtsy_1"}]}
]

# 相当于h1 ## 相当于h2 ### 相当于h3 以此类推具体可看这个

https://maxiang.io/#%E4%BB%A3%E7%A0%81%E5%9D%97

marked 用户手册在线查看相关推荐

使用微软提供的Office Online实现Office文档的在线查看,编辑等功能
使用微软提供的Office Online平台只需要一个网址即可在线查看Xls,doc,PPT等文档 http://view.officeapps.live.com/op/view.aspx?src=要 ...
java 查看pdf_Java中实现pdf在线查看和下载
Java中实现PDF的在线查看和下载,可以以servlet来实现. /** * 支持在线打开和下载 * * @param filePath * @param response * @param isO ...
ftp服务器在线查看文件内容,ftp服务器PDF文件在线查看的实现方法
URL形式: // http://localhost:2692/PDFVIEWER/web/viewer.html?file=http://localhost:2692/TOV/DASystem/Ge ...
Office Web Apps 2013 修改Excel在线查看文件大小限制
最近搭建了一个OWA 2013环境,帮客户实现在线查看Excel文档,不过,使用过程中出现了错误,文件大小超过10MB就无法预览了,查了好久,发现需要使用PowerShell命令进行修改. 1.出现的 ...
Office Web App2013 在线查看PDF文件
经常会有客户问,在SharePoint中,如何在浏览器中查看与编辑文档,通常给出的解决方案是集成Office Web App. 而在实际应用过程中,客户通常会要求实现PDF文件在线查看,对于PDF文件 ...
利用微软的平台进行Office文档的在线查看
微软的预览Office服务: 1.在线查看:http://view.officeapps.live.com/op/view.aspx?src=文档地址文档地址用URLEncode进行处理的链接地址. ...
ftp服务器PDF文件在线查看
曾做过电厂的项目,有一些功能需要和甲方的厂家对接,其中就有需要实现甲方ftp服务器上的PDF.JPG等文件的查看功能.就PDF文件为例,这里使用的是pdf插件,需要将参数通过链接发给ftp,获取到PD ...
ftp服务器在线浏览,ftp服务器PDF文件在线查看的实现方法
URL形式: // http://localhost:2692/PDFVIEWER/web/viewer.html?file=http://localhost:2692/TOV/DASystem/Ge ...
android浏览在线ppt,（简单好用的在线查看文件方法）Android 使用AgentWebView在线查看wrold丶ppt丶pdf等文件...
之前做法是偷偷下载文档调用第三方wps打开,完事后偷偷删除,说实话这样有点难受. 后来发现浏览器使用worldonline可以查看文档,放到Android自带webview上直接是一个小红叉, 点击链 ...
推荐一个在线查看函数图象的网站 —— Desmos
推荐一个在线查看函数图象的网站 -- Desmos ,挺有用的,收藏一下.

marked 用户手册在线查看

marked 用户手册在线查看相关推荐

最新文章

热门文章

marked 用户手册 在线查看

marked 用户手册 在线查看相关推荐

最新文章

热门文章

marked 用户手册在线查看

marked 用户手册在线查看相关推荐