Feature(mixin): add mixin demo page & add pre-load global scss support

Author: Armour

package.json

@@ -7,23 +7,9 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6",
     "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "vue-cli-service test:unit",
-    "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6"
-  },
-  "keywords": [
-    "vue",
-    "typescript",
-    "admin",
-    "dashboard",
-    "element-ui"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/armour/vue-typescript-admin-template.git"
-  },
-  "bugs": {
-    "url": "https://github.com/armour/vue-typescript-admin-template/issues"
+    "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
     "@tinymce/tinymce-vue": "^2.0.0",
@@ -74,13 +60,13 @@
     "@types/tinymce": "^4.5.22",
     "@types/webpack-env": "^1.13.9",
     "@types/xlsx": "^0.0.36",
-    "@vue/cli-plugin-babel": "^3.7.0",
-    "@vue/cli-plugin-e2e-cypress": "^3.7.0",
-    "@vue/cli-plugin-eslint": "^3.7.0",
-    "@vue/cli-plugin-pwa": "^3.7.0",
-    "@vue/cli-plugin-typescript": "^3.7.0",
-    "@vue/cli-plugin-unit-jest": "^3.7.0",
-    "@vue/cli-service": "^3.7.0",
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-e2e-cypress": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-plugin-pwa": "^3.8.0",
+    "@vue/cli-plugin-typescript": "^3.8.1",
+    "@vue/cli-plugin-unit-jest": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/eslint-config-typescript": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.29",
@@ -93,19 +79,35 @@
     "lint-staged": "^8.1.7",
     "sass": "^1.20.1",
     "sass-loader": "^7.1.0",
+    "style-resources-loader": "^1.2.1",
     "ts-jest": "^24.0.2",
     "typescript": "3.4.5",
     "vue-cli-plugin-element": "^1.0.1",
+    "vue-cli-plugin-style-resources-loader": "^0.1.3",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.32.2"
   },
+  "bugs": {
+    "url": "https://github.com/armour/vue-typescript-admin-template/issues"
+  },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
+  "keywords": [
+    "vue",
+    "typescript",
+    "admin",
+    "template",
+    "element-ui"
+  ],
   "lint-staged": {
     "*.{js,vue}": [
       "vue-cli-service lint",
       "git add"
     ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/armour/vue-typescript-admin-template.git"
   }
 }

src/components/DropdownMenu/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    :class="{active: isActive}"
+    class="share-dropdown-menu"
+  >
+    <div class="share-dropdown-menu-wrapper">
+      <span
+        class="share-dropdown-menu-title"
+        @click.self="clickTitle"
+      >{{ title }}</span>
+      <div
+        v-for="(item,index) of items"
+        :key="index"
+        class="share-dropdown-menu-item"
+      >
+        <a
+          v-if="item.href"
+          :href="item.href"
+          target="_blank"
+        >{{ item.title }}</a>
+        <span v-else>{{ item.title }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component
+export default class DropdownMenu extends Vue {
+  @Prop({ default: () => [] }) private items!: object[]
+  @Prop({ default: 'vue' }) private title!: string
+
+  private isActive = false
+
+  private clickTitle() {
+    this.isActive = !this.isActive
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$item-length: 10; // Should be no less than items.length
+$transition-time: .1s;
+
+.share-dropdown-menu {
+  width: 250px;
+  position: relative;
+  z-index: 1;
+
+  &-title {
+    width: 100%;
+    display: block;
+    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 $item-length {
+      &:nth-of-type(#{$i}) {
+        z-index: -1;
+        transition-delay: $i*$transition-time;
+        transform: translate3d(0, -60px, 0);
+      }
+    }
+  }
+
+  &.active {
+    .share-dropdown-menu-wrapper {
+      z-index: 1;
+    }
+
+    .share-dropdown-menu-item {
+      @for $i from 1 through $item-length {
+        &:nth-of-type(#{$i}) {
+         transition-delay: ($item-length - $i)*$transition-time;
+          transform: translate3d(0, ($i - 1)*60px, 0);
+        }
+      }
+    }
+  }
+}
+</style>

src/components/UploadImage/index.vue

@@ -74,8 +74,6 @@ export default class UploadImage extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "src/styles/mixin.scss";
-
 .upload-container {
   width: 100%;
   position: relative;

src/layout/components/Sidebar/SidebarItem.vue

@@ -122,8 +122,6 @@ export default class SidebarItem extends Vue {
 </script>
 
 <style lang="scss">
-@import "src/styles/variables.scss";
-
 .el-submenu.is-active > .el-submenu__title {
   color: $subMenuActiveText !important;
 }

src/layout/components/Sidebar/index.vue

@@ -34,7 +34,7 @@ import { PermissionModule } from '@/store/modules/permission'
 import { SettingsModule } from '@/store/modules/settings'
 import Logo from './Logo.vue'
 import SidebarItem from './SidebarItem.vue'
-import variables from '@/styles/variables.scss'
+import variables from '@/styles/_variables.scss'
 
 @Component({
   components: {

src/layout/index.vue

@@ -73,9 +73,6 @@ export default class Layout extends mixins(ResizeMixin) {
 </script>
 
 <style lang="scss" scoped>
-@import "src/styles/mixin.scss";
-@import "src/styles/variables.scss";
-
 .app-wrapper {
   @include clearfix;
   position: relative;

src/router/modules/components.ts

@@ -59,12 +59,12 @@ const componentsRouter: RouteConfig = {
       name: 'CountToDemo',
       meta: { title: 'countTo' }
     },
-    // {
-    //   path: 'mixin',
-    //   component: () => import('@/views/components-demo/mixin'),
-    //   name: 'ComponentMixinDemo',
-    //   meta: { title: 'Component Mixin' }
-    // },
+    {
+      path: 'mixin',
+      component: () => import(/* webpackChunkName: "componentMixin" */ '@/views/components-demo/mixin.vue'),
+      name: 'ComponentMixinDemo',
+      meta: { title: 'componentMixin' }
+    },
     {
       path: 'back-to-top',
       component: () => import(/* webpackChunkName: "backToTop" */ '@/views/components-demo/back-to-top.vue'),

src/styles/mixin.scss renamed to src/styles/_mixins.scss

@@ -1,3 +1,13 @@
+/* base color */
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+
 /* Sidebar */
 $sideBarWidth: 210px;
 $subMenuBg:#1f2d3d;

src/styles/svgicon.scss renamed to src/styles/_svgicon.scss

@@ -14,7 +14,7 @@ $--table-border:1px solid#dfe6ec;
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 // Apply overrided variables in Element UI
-@import "~element-ui/packages/theme-chalk/src/index";
+@import '~element-ui/packages/theme-chalk/src/index';
 
 // The :export directive is the magic sauce for webpack
 // https://mattferderer.com/use-sass-variables-in-typescript-and-javascript

src/styles/transition.scss renamed to src/styles/_transition.scss

@@ -1,6 +1,6 @@
 @import './element-variables.scss';
 @import './variables.scss';
-@import './mixin.scss';
+@import './mixins.scss';
 @import './transition.scss';
 @import './svgicon.scss';
 
@@ -117,3 +117,7 @@ aside {
     text-align: center;
   }
 }
+
+.text-center {
+  text-align: center
+}