113 lines
3.0 KiB
Vue
113 lines
3.0 KiB
Vue
<template>
|
|
<a-card :bordered="false" class="mb-none">
|
|
<container>
|
|
<a-row :gutter="16" type="flex">
|
|
<a-col flex="auto">
|
|
<container mode="container">
|
|
<section :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
|
|
<h1>{{ doc.title }}</h1>
|
|
<component :codes="codes" :is="doc.component" v-if="doc.name" />
|
|
<template v-if="doc.children">
|
|
<section
|
|
:id="`doc-${index}-${_index}`"
|
|
:key="_index"
|
|
v-for="(_doc, _index) in doc.children"
|
|
>
|
|
<h3>{{ _doc.title }}</h3>
|
|
<component :codes="codes" :is="_doc.component" v-if="_doc.name" />
|
|
</section>
|
|
</template>
|
|
</section>
|
|
</container>
|
|
</a-col>
|
|
<a-col flex="240px">
|
|
<a-anchor
|
|
:get-container="()=> $el.parentNode"
|
|
:offset-top="24"
|
|
:wrapper-style="{ backgroundColor: 'transparent' }"
|
|
>
|
|
<a-anchor-link
|
|
:href="`#doc-${index}`"
|
|
:key="index"
|
|
:title="doc.title"
|
|
v-for="(doc, index) in docs"
|
|
>
|
|
<template v-if="doc.children">
|
|
<a-anchor-link
|
|
:href="`#doc-${index}-${_index}`"
|
|
:key="_index"
|
|
:title="_doc.title"
|
|
v-for="(_doc, _index) in doc.children"
|
|
/>
|
|
</template>
|
|
</a-anchor-link>
|
|
</a-anchor>
|
|
</a-col>
|
|
</a-row>
|
|
</container>
|
|
</a-card>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
docs: [
|
|
{
|
|
title: '开始使用',
|
|
name: '/usage',
|
|
},
|
|
{
|
|
title: '窗口',
|
|
},
|
|
{
|
|
title: '种子',
|
|
name: '/seed',
|
|
children: [
|
|
{
|
|
title: '查询表格',
|
|
name: '/seed/query',
|
|
},
|
|
{
|
|
title: '编辑窗口',
|
|
name: '/seed/form',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
codes: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.docs.forEach((doc) => {
|
|
if (doc.name) {
|
|
this.$set(doc, 'component', () => import(`.${doc.name}`));
|
|
}
|
|
if (doc.children) {
|
|
doc.children.forEach((_doc) => {
|
|
this.$set(_doc, 'component', () => import(`.${_doc.name}`));
|
|
});
|
|
}
|
|
});
|
|
|
|
// 读取doc-code下所有文件内容
|
|
const files = require.context('@/../public/doc-code', true, /\.(js|html|vue|css|less|json)(\?.*)?$/);
|
|
const codes = {};
|
|
files.keys().forEach((p) => {
|
|
const fileName = p.slice(1);
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('GET', `./doc-code${fileName}`, false);
|
|
xhr.overrideMimeType('text/plain;charset=utf-8');
|
|
xhr.send(null);
|
|
codes[fileName] = xhr.responseText;
|
|
});
|
|
console.log(codes);
|
|
this.codes = codes;
|
|
},
|
|
methods: {
|
|
container() {
|
|
return this.$el;
|
|
},
|
|
},
|
|
};
|
|
</script>
|