feat:add share demo

src/components/Share/dropdownMenu.vue

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

src/views/components-demo/mixin.vue

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