更新文档
parent
1ae58175a9
commit
8f1548e52b
|
|
@ -12,7 +12,7 @@
|
|||
<script type="importmap">{{importmap}}</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app noselect"></div>
|
||||
<div id="app"></div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
## 0.1.3 - 2023/4/21
|
||||
|
|
@ -1,12 +1,41 @@
|
|||
<template>
|
||||
<Topbar nav="docs" />
|
||||
<main class="body">
|
||||
<Menu />
|
||||
<wc-scroll class="content" ref="detail">
|
||||
<wc-markd class="detail" :code="docset"></wc-markd>
|
||||
</wc-scroll>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Topbar from '../index/components/topbar.vue'
|
||||
import Menu from './components/aside.vue'
|
||||
|
||||
import fetch from 'fetch'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Topbar
|
||||
Topbar,
|
||||
Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
docset: ''
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let key = location.search.slice(1)
|
||||
|
||||
fetch(`/docset/ui/${key}.md`)
|
||||
.then(r => r.text())
|
||||
.then(r => {
|
||||
this.docset = r
|
||||
})
|
||||
.catch(r => {
|
||||
this.docset = 'Oops!!! 你要浏览的文档, 被外星人吃了~~'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -21,4 +50,25 @@ a {
|
|||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<wc-scroll class="tree-box noselect">
|
||||
<dl class="chapters">
|
||||
<dt class="title">
|
||||
<a
|
||||
v-for="it in menu.base"
|
||||
:class="{ a: id === it.id }"
|
||||
:href="'?' + it.id"
|
||||
>
|
||||
<span>{{ it.name }}</span>
|
||||
<em>{{ it.id }}</em>
|
||||
</a>
|
||||
</dt>
|
||||
<dt class="title">表单组件</dt>
|
||||
<dd class="subtitle">
|
||||
<a
|
||||
class="text-ell"
|
||||
v-for="it in menu.form"
|
||||
:class="{ a: id === it.id }"
|
||||
:href="'?' + it.id"
|
||||
>
|
||||
<span>{{ it.name }}</span>
|
||||
<em>{{ it.id }}</em>
|
||||
</a>
|
||||
</dd>
|
||||
<dt class="title">数据组件</dt>
|
||||
<dd class="subtitle">
|
||||
<a
|
||||
class="text-ell"
|
||||
v-for="it in menu.data"
|
||||
:class="{ a: id === it.id }"
|
||||
:href="'?' + it.id"
|
||||
>
|
||||
<span>{{ it.name }}</span>
|
||||
<em>{{ it.id }}</em>
|
||||
</a>
|
||||
</dd>
|
||||
<dt class="title">其他组件</dt>
|
||||
<dd class="subtitle">
|
||||
<a
|
||||
class="text-ell"
|
||||
v-for="it in menu.other"
|
||||
:class="{ a: id === it.id }"
|
||||
:href="'?' + it.id"
|
||||
>
|
||||
<span>{{ it.name }}</span>
|
||||
<em>{{ it.id }}</em>
|
||||
</a>
|
||||
</dd>
|
||||
</dl>
|
||||
</wc-scroll>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: 'logs',
|
||||
menu: {
|
||||
base: [
|
||||
{ id: 'logs', name: '更新日志' },
|
||||
{ id: 'install', name: '安装' },
|
||||
{ id: 'colors', name: '配色' },
|
||||
{ id: 'icons', name: '图标' }
|
||||
],
|
||||
form: [
|
||||
{ id: 'wc-button', name: '按钮' },
|
||||
{ id: 'wc-link', name: '超连接' },
|
||||
{ id: 'wc-input', name: '文本框' },
|
||||
{ id: 'wc-passwd', name: '密码框' },
|
||||
{ id: 'wc-number', name: '数字文本框' },
|
||||
{ id: 'wc-textarea', name: '文本域' },
|
||||
{ id: 'wc-select', name: '选择框' },
|
||||
{ id: 'wc-switch', name: '开关' },
|
||||
{ id: 'wc-radio', name: '单选框' },
|
||||
{ id: 'wc-checkbox', name: '复选框' },
|
||||
{ id: 'wc-star', name: '评分条' },
|
||||
{ id: 'wc-slider', name: '滑块' },
|
||||
{ id: 'wc-color', name: '取色器' }
|
||||
],
|
||||
data: [
|
||||
{ id: 'wc-progress', name: '进度条' },
|
||||
{ id: 'wc-table', name: '表格' },
|
||||
{ id: 'wc-tree', name: '树形菜单' },
|
||||
{ id: 'wc-pager', name: '分页' },
|
||||
{ id: 'wc-dropdown', name: '下拉菜单' }
|
||||
],
|
||||
other: [
|
||||
{ id: 'wc-layer', name: '弹层' },
|
||||
{ id: 'wc-scroll', name: '滚动条' },
|
||||
{ id: 'wc-code', name: '代码块' },
|
||||
{ id: 'wc-markd', name: 'MD渲染组件' },
|
||||
{ id: 'wc-meditor', name: 'MD编辑器' },
|
||||
{ id: 'wc-editor', name: '富文本编辑器' },
|
||||
{ id: 'wc-badge', name: '标记' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tree-box {
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
|
||||
.chapters {
|
||||
padding: 32px;
|
||||
line-height: 2;
|
||||
border-right: 1px solid var(--color-plain-2);
|
||||
background: #fff;
|
||||
color: var(--color-grey-3);
|
||||
|
||||
.title {
|
||||
a {
|
||||
color: var(--color-dark-2);
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
padding-left: 12px;
|
||||
color: var(--color-dark-2);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
span {
|
||||
}
|
||||
em {
|
||||
margin-left: 8px;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
color: var(--color-grey-2);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:hover em,
|
||||
&.a,
|
||||
&.a em {
|
||||
color: var(--color-red-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,4 +5,4 @@ import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
|
|||
|
||||
const app = createApp(App)
|
||||
|
||||
app.mount('.app')
|
||||
app.mount('#app')
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
|
|||
|
||||
const app = createApp(App)
|
||||
|
||||
app.mount('.app')
|
||||
app.mount('#app')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<h1>it works!</h1>
|
||||
<div>
|
||||
<wc-link to="/@wcui/index.html">@wcui</wc-link>
|
||||
<wc-link to="/@wcui/docs.html">@wcui/docs</wc-link>
|
||||
<wc-link to="/playground.html">plyaground</wc-link>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
|
|||
|
||||
const app = createApp(App)
|
||||
|
||||
app.mount('.app')
|
||||
app.mount('#app')
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ import store from './store'
|
|||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(store).mount('.app')
|
||||
app.use(store).mount('#app')
|
||||
|
|
|
|||
Loading…
Reference in New Issue