添加doc预览
This commit is contained in:
niunai
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div
|
||||
class="demo-block"
|
||||
:class="[blockClass, { 'hover': hovering }]"
|
||||
@mouseenter="hovering = true"
|
||||
@mouseleave="hovering = false">
|
||||
<slot name="source"></slot>
|
||||
<div class="meta">
|
||||
<div class="description">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<slot name="highlight">
|
||||
</slot>
|
||||
</div>
|
||||
<div class="demo-block-control" @click="isExpanded = !isExpanded">
|
||||
<span v-show="hovering">{{ controlText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hovering: false,
|
||||
isExpanded: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
blockClass() {
|
||||
return `demo-${this.$route.path.split('/').pop()}`;
|
||||
},
|
||||
|
||||
controlText() {
|
||||
return this.isExpanded ? '隐藏代码' : '显示代码';
|
||||
},
|
||||
|
||||
codeArea() {
|
||||
return this.$el.getElementsByClassName('meta')[0];
|
||||
},
|
||||
|
||||
codeAreaHeight() {
|
||||
if (this.$el.getElementsByClassName('description').length > 0) {
|
||||
return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
|
||||
}
|
||||
return this.$el.getElementsByClassName('highlight')[0].clientHeight;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
isExpanded(val) {
|
||||
this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0';
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let highlight = this.$el.getElementsByClassName('highlight')[0];
|
||||
if (this.$el.getElementsByClassName('description').length === 0) {
|
||||
highlight.style.width = '100%';
|
||||
highlight.borderRight = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-block {
|
||||
border: solid 1px #eaeefb;
|
||||
border-radius: 4px;
|
||||
transition: .2s;
|
||||
|
||||
&.hover {
|
||||
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.demo-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.source {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
background-color: #f9fafc;
|
||||
border-top: solid 1px #eaeefb;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height .2s;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 18px 24px;
|
||||
width: 40%;
|
||||
box-sizing: border-box;
|
||||
border-left: solid 1px #eaeefb;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: #5e6d82;
|
||||
word-break: break-word;
|
||||
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #5e6d82;
|
||||
background-color: #e6effb;
|
||||
margin: 0 4px;
|
||||
transform: translateY(-2px);
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
width: 60%;
|
||||
border-right: solid 1px #eaeefb;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
margin: 0;
|
||||
border: none;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-block-control {
|
||||
border-top: solid 1px #eaeefb;
|
||||
height: 36px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
text-align: center;
|
||||
margin-top: -1px;
|
||||
color: #d3dce6;
|
||||
cursor: pointer;
|
||||
transition: .2s;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
line-height: 36px;
|
||||
transition: .3s;
|
||||
&.hovering {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
transform: translateX(-30px);
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
transition: .3s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #20a0ff;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
& .text-slide-enter,
|
||||
& .text-slide-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="side-nav">
|
||||
<ul>
|
||||
<li class="nav-item" v-for="item in data">
|
||||
<a v-if="!item.path">{{item.name}}</a>
|
||||
<router-link
|
||||
v-else
|
||||
active-class="active"
|
||||
:to="base + item.path"
|
||||
exact
|
||||
v-text="item.title || item.name">
|
||||
</router-link>
|
||||
<ul class="pure-menu-list sub-nav" v-if="item.children">
|
||||
<li class="nav-item" v-for="navItem in item.children">
|
||||
<router-link
|
||||
active-class="active"
|
||||
:to="base + navItem.path"
|
||||
v-text="navItem.title || navItem.name">
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="item.groups">
|
||||
<div class="nav-group" v-for="group in item.groups">
|
||||
<div class="nav-group__title">{{group.groupName}}</div>
|
||||
<ul class="pure-menu-list">
|
||||
<template v-for="navItem in group.list">
|
||||
<li
|
||||
class="nav-item"
|
||||
v-if="!navItem.disabled">
|
||||
<router-link
|
||||
active-class="active"
|
||||
:to="base + navItem.path"
|
||||
v-text="navItem.title">
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Array,
|
||||
base: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.side-nav {
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 30px;
|
||||
float: left;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #5e6d82;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
|
||||
&.active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 13px;
|
||||
padding-left: 24px;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-group__title {
|
||||
font-size: 12px;
|
||||
color: #99a9bf;
|
||||
padding-left: 8px;
|
||||
line-height: 26px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user