zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:add share demo

This commit is contained in:
Pan 2017-11-27 11:47:13 +08:00
parent 2ec9fe74a8
commit bee26561aa
2 changed files with 58 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Share/dropdownMenu.vue
View File

@ -40,6 +40,7 @@ $t: .1s;
.share-dropdown-menu { .share-dropdown-menu {
width: 250px; width: 250px;
position: relative; position: relative;
z-index: 1;
&-title { &-title {
width: 100%; width: 100%;
display: block; display: block;

79
src/views/components-demo/mixin.vue
View File

@ -1,24 +1,31 @@
<template> <template>
<div class="components-container"> <div class="mixin-components-container">
<el-row> <el-row>
<el-col :span="4" class="text-center"> <el-card class="box-card">
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link> <div slot="header" class="clearfix">
</el-col> <span>Buttons</span>
<el-col :span="4" class="text-center"> </div>
<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link> <div style="margin-bottom:50px;">
</el-col> <el-col :span="4" class="text-center">
<el-col :span="4" class="text-center"> <router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link> </el-col>
</el-col> <el-col :span="4" class="text-center">
<el-col :span="4" class="text-center"> <router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
<router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link> </el-col>
</el-col> <el-col :span="4" class="text-center">
<el-col :span="4" class="text-center"> <router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
<router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link> </el-col>
</el-col> <el-col :span="4" class="text-center">
<el-col :span="4" class="text-center"> <router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link> </el-col>
</el-col> <el-col :span="4" class="text-center">
<router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link>
</el-col>
<el-col :span="4" class="text-center">
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
</el-col>
</div>
</el-card>
</el-row> </el-row>
<el-row :gutter="20" style="margin-top:50px;"> <el-row :gutter="20" style="margin-top:50px;">
@ -73,21 +80,37 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" style="margin-top:50px;">
<el-col :span="6">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Share</span>
</div>
<div class="component-item" style="height:360px;">
<dropdown-menu style="margin:0 auto;" title='系列文章' :items='articleList'></dropdown-menu>
</div>
</el-card>
</el-col>
</el-row>
<dropdown-menu style="margin:0 auto;" title='系列文章' :items='articleList'></dropdown-menu>
</div> </div>
</template> </template>
<script> <script>
import PanThumb from '@/components/PanThumb' import PanThumb from '@/components/PanThumb'
import MdInput from '@/components/MDinput' import MdInput from '@/components/MDinput'
import waves from '@/directive/waves/index.js' // 水波纹指令
import Mallki from '@/components/TextHoverEffect/Mallki' import Mallki from '@/components/TextHoverEffect/Mallki'
import DropdownMenu from '@/components/Share/dropdownMenu'
import waves from '@/directive/waves/index.js' // 水波纹指令
export default { export default {
name: 'componentMixin-demo', name: 'componentMixin-demo',
components: { components: {
PanThumb, PanThumb,
MdInput, MdInput,
Mallki Mallki,
DropdownMenu
}, },
directives: { directives: {
waves waves
@ -106,13 +129,25 @@ export default {
}, },
demoRules: { demoRules: {
title: [{ required: true, trigger: 'change', validator: validate }] title: [{ required: true, trigger: 'change', validator: validate }]
} },
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> </script>
<style scoped> <style scoped>
.mixin-components-container {
background-color: #f0f2f5;
padding: 30px;
min-height: calc(100vh - 84px);
}
.component-item{ .component-item{
min-height: 100px; min-height: 100px;
} }