forked from AkkomaGang/admin-fe
refactor:add documentation
This commit is contained in:
Pan
parent
f6279077de
commit
690c779c64
3 changed files with 138 additions and 33 deletions
97
src/components/Share/dropdownMenu.vue
Normal file
97
src/components/Share/dropdownMenu.vue
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
<template>
|
||||||
|
<div class="share-dropdown-menu" @click.native="click" :class="{active:isActive}">
|
||||||
|
<div class="share-dropdown-menu-wrapper">
|
||||||
|
<span class="share-dropdown-menu-title">{{title}}</span>
|
||||||
|
<div class="share-dropdown-menu-item" v-for="(item,index) of items" :key='index'>
|
||||||
|
<a v-if="item.href" :href="item.href" target="_blank">{{item.title}}</a>
|
||||||
|
<span v-else>{{item.title}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
items: {
|
||||||
|
type: Array
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: 'vue'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isActive: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
click() {
|
||||||
|
this.isActive = !this.isActive
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style rel="stylesheet/scss" lang="scss" >
|
||||||
|
$n: 5; //和items.length 相同
|
||||||
|
$t: .1s;
|
||||||
|
.share-dropdown-menu {
|
||||||
|
width: 250px;
|
||||||
|
position: relative;
|
||||||
|
&-title {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 2;
|
||||||
|
transform: translate3d(0,0,0);
|
||||||
|
}
|
||||||
|
&-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
&-item {
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
background: #e0e0e0;
|
||||||
|
line-height: 60px;
|
||||||
|
height: 60px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 20px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: transform 0.28s ease;
|
||||||
|
&:hover {
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
@for $i from 1 through $n {
|
||||||
|
&:nth-of-type(#{$i}) {
|
||||||
|
z-index: -1;
|
||||||
|
transition-delay: $i*$t;
|
||||||
|
transform: translate3d(0, -60px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.share-dropdown-menu-wrapper {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.share-dropdown-menu-item {
|
||||||
|
@for $i from 1 through $n {
|
||||||
|
&:nth-of-type(#{$i}) {
|
||||||
|
transition-delay: ($n - $i)*$t;
|
||||||
|
transform: translate3d(0, ($i - 1)*60px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="Price" width="195" align="center">
|
<el-table-column label="Price" width="195" align="center">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{scope.row.price | toThousandslsFilter}}
|
¥{{scope.row.price | toThousandslsFilter}}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="Status" width="100" align="center">
|
<el-table-column label="Status" width="100" align="center">
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,47 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container documentation-container">
|
||||||
<div class="wrapper">
|
<a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">文档</a>
|
||||||
<code>
|
<a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">Github 地址</a>
|
||||||
<ul>
|
<dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
|
||||||
<li>
|
|
||||||
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">项目地址</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">详细文档</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target='_blank' href="https://juejin.im/post/59097cd7a22b9d0065fb61d2">手摸手，带你用 vue 撸后台 系列一(基础篇)</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target='_blank' href="https://juejin.im/post/591aa14f570c35006961acac">手摸手，带你用 vue 撸后台 系列二(登录权限篇)</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target='_blank' href="https://juejin.im/post/593121aa0ce4630057f70d35">手摸手，带你用 vue 撸后台 系列三 (实战篇)</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target='_blank' href="https://juejin.im/post/595b4d776fb9a06bbe7dba56">手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a target='_blank' href="https://segmentfault.com/a/1190000009090836">手摸手，带你封装一个vue component</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DropdownMenu from '@/components/Share/dropdownMenu'
|
||||||
|
|
||||||
<style scoped>
|
export default {
|
||||||
.wrapper{
|
name: 'clipboardDemo',
|
||||||
width: 800px;
|
components: { DropdownMenu },
|
||||||
margin: 30px auto;
|
data() {
|
||||||
|
return {
|
||||||
|
articleList: [
|
||||||
|
{ title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' },
|
||||||
|
{ title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' },
|
||||||
|
{ title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
|
||||||
|
{ title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
|
||||||
|
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' }
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
|
.documentation-container {
|
||||||
|
margin: 50px;
|
||||||
|
.document-btn {
|
||||||
|
float: left;
|
||||||
|
margin-left: 50px;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
height: 60px;
|
||||||
|
width: 200px;
|
||||||
|
line-height: 60px;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue