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)">
<span
v-show="item.children&&!item.collapse"
class="icon-add"
@click="item.collapse=!item.collapse"
></span>
<span
v-show="item.children&&item.collapse"
class="icon-minus"
@click="item.collapse=!item.collapse"
></span>
<span
v-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)">
<span
v-show="urlName==item1.name&&!item1.children"
class="icon-click"
@click="item1.collapse=!item1.collapse"
></span>
<span
class="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)">
<span
class="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;">
<div
v-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: "", //url
tagName: "", //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;
},
// 跳转至用户反馈模块 - GYJ
toFeedback() {
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