Merge pull request #21 from FairyEver/dev

bug fixed

Former-commit-id: ae8ad31df5bebc240e7474745c338c21dfc36310 [formerly ae8ad31df5bebc240e7474745c338c21dfc36310 [formerly ae8ad31df5bebc240e7474745c338c21dfc36310 [formerly ae8ad31df5bebc240e7474745c338c21dfc36310 [formerly c2a9288f59c62e3e3db1c377587c4bfd5fb0a1c2 [formerly 037344415c1cbe9cadc586d3ddb87b4210a410af]]]]]
Former-commit-id: 3d07c753b8e98c1545cf5f69fb602f887dbf57e2
Former-commit-id: 61009046e4272f44236e928efeee3c56f07ffcf7
Former-commit-id: 2d4939d2bdf2a2757895c73772e5f71e5a112fdd [formerly 5a225663d3e4e78fc423e1a2819fc858fc53b683]
Former-commit-id: 0f8c335f7abb583025f1f30314321dfde0e9bce9
Former-commit-id: 157167cb42406298156278145b8301af8d34e4a8
Former-commit-id: c17274c4659b0cf7c7193b5c9d548c755cb745cf
Former-commit-id: 79611d7a61f2fa0b74f2dd547e8a0669a40edc73
Former-commit-id: 8729c01b52e0435e413788e43fe780d28e5f286f

docs/zh/guide/change-log.md

@@ -29,6 +29,8 @@
 * [ 修复 ] d2-container 组件改为同步注册（之前的异步注册会有 mounted 生命周期问题，即 slot 内的页面在 mounted 生命周期内拿不到 dom）
 * [ 修复 ] d2-container 组件重构 flex 布局
 * [ 新增 ] 404 page
+* [ 新增 ] 顶栏联系方式
+* [ 新增 ] 右键菜单组件
 
 ## v1.0.0
 

src/assets/style/fixed/vue-grid-layout.scss

@@ -1,7 +1,5 @@
 // vue-splitpane 样式补丁
 
-@import '~@/assets/style/unit/_color.scss';
-
 .vue-grid-item {
   &.vue-grid-placeholder {
     border: 1px solid $color-border-1;

src/components/core/register.js

@@ -3,7 +3,7 @@ import Vue from 'vue'
 import { GridLayout, GridItem } from 'vue-grid-layout'
 import SplitPane from 'vue-splitpane'
 
-// 主容器
+// 主容器 这个必须要同步注册
 import d2Container from '@/components/core/d2-container'
 
 Vue.component('d2-grid-layout', GridLayout)

src/menu/index.js

@@ -101,11 +101,14 @@ const demoComponents = {
       children: [
         { path: `${pre}contextmenu/simple`, title: '基础' },
         { path: `${pre}contextmenu/divier`, title: '分割线' },
-        { path: `${pre}contextmenu/group`, title: '按钮组' }
+        { path: `${pre}contextmenu/group`, title: '按钮组' },
+        { path: `${pre}contextmenu/submenu`, title: '子菜单' },
+        { path: `${pre}contextmenu/disabled`, title: '禁用' },
+        { path: `${pre}contextmenu/custom-trigger`, title: '自定义事件' }
       ]
     },
     { path: `${pre}bigdata-table`, title: '百万数量级表格' },
-    { path: `${pre}scrollbar`, title: 'ElementUI 滚动条组件' },
+    { path: `${pre}scrollbar`, title: 'Element 滚动条组件' },
     { path: `${pre}countup`, title: '数字动画' },
     { path: `${pre}editor-quill`, title: '富文本编辑器' },
     { path: `${pre}editor-simpleMDE`, title: 'markdown编辑器' },
@@ -142,7 +145,7 @@ const demoChart = {
 // 路由菜单 组件库
 const demoElement = {
   path: '/demo/element',
-  title: '组件库',
+  title: 'Element 组件库',
   icon: 'puzzle-piece',
   children: (pre => [
     { path: `${pre}index`, title: '组件库首页' },

src/pages/core/404/index.vue

@@ -8,6 +8,7 @@
 </template>
 
 <style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
 .page-404 {
   background-color: #555555;
   height: 100%;
@@ -17,7 +18,7 @@
   flex-direction: column;
   img {
     width: 196px;
-    user-select: none;
+    @extend %unable-select;
   }
 }
 </style>

src/pages/demo/business/index/index.vue

@@ -2,7 +2,7 @@
   <d2-container type="full">
     <d2-demo-page-cover
       title="示例业务页面"
-      sub-title="如果用不到 建议删除相关代码">
+      sub-title="暂时还没有什么">
       <img src="@/assets/image/logo/w500-business.png">
     </d2-demo-page-cover>
   </d2-container>

src/pages/demo/business/user-center/home/index.vue

@@ -1,6 +0,0 @@
-<template>
-  <d2-container type="full">
-    <template slot="header">用户中心</template>
-    doing...
-  </d2-container>
-</template>

src/pages/demo/components/contextmenu/custom-trigger.vue

@@ -0,0 +1,46 @@
+<template>
+  <d2-container>
+    <template slot="header">自定义事件</template>
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu>
+    <v-contextmenu ref="dbContextmenu" event-type="dblclick">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+    </v-contextmenu>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div class="contextmenu-pad" v-contextmenu:contextmenu>
+          右键点击此区域
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="contextmenu-pad" v-contextmenu:dbContextmenu>
+          左键双击此区域
+        </div>
+      </el-col>
+    </el-row>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick (vm, event) {
+      this.$message({
+        message: `你点击了${vm.$slots.default[0].text}`,
+        type: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style/pub.scss';
+</style>

src/pages/demo/components/contextmenu/disabled.vue

@@ -0,0 +1,38 @@
+<template>
+  <d2-container>
+    <template slot="header">禁用</template>
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="handleClick">菜单1</v-contextmenu-item>
+      <v-contextmenu-item disabled @click="handleClick">菜单2</v-contextmenu-item>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-submenu title="子菜单">
+        <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item>
+        <v-contextmenu-item divider></v-contextmenu-item>
+        <v-contextmenu-submenu disabled title="子菜单">
+          <v-contextmenu-item @click="handleClick">菜单5</v-contextmenu-item>
+        </v-contextmenu-submenu>
+        <v-contextmenu-item @click="handleClick">菜单4</v-contextmenu-item>
+      </v-contextmenu-submenu>
+    </v-contextmenu>
+    <div class="contextmenu-pad" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick (vm, event) {
+      this.$message({
+        message: `你点击了${vm.$slots.default[0].text}`,
+        type: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style/pub.scss';
+</style>

src/pages/demo/components/contextmenu/group.vue

@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <template slot="header">分割线</template>
+    <template slot="header">按钮组</template>
     <v-contextmenu ref="contextmenu">
       <v-contextmenu-group>
         <v-contextmenu-item>菜单1</v-contextmenu-item>

src/pages/demo/components/contextmenu/submenu.vue

@@ -0,0 +1,40 @@
+<template>
+  <d2-container>
+    <template slot="header">子菜单</template>
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item @click="handleClick">菜单 1</v-contextmenu-item>
+      <v-contextmenu-item @click="handleClick">菜单 2</v-contextmenu-item>
+      <v-contextmenu-item divider></v-contextmenu-item>
+      <v-contextmenu-submenu title="菜单 3">
+        <v-contextmenu-item @click="handleClick">菜单 3-1</v-contextmenu-item>
+        <v-contextmenu-item divider></v-contextmenu-item>
+        <v-contextmenu-submenu title="菜单 3-2">
+          <v-contextmenu-item @click="handleClick">菜单 3-2-1</v-contextmenu-item>
+        </v-contextmenu-submenu>
+        <v-contextmenu-item @click="handleClick">菜单 3-3</v-contextmenu-item>
+        <v-contextmenu-item @click="handleClick">菜单 3-4</v-contextmenu-item>
+        <v-contextmenu-item @click="handleClick">菜单 3-5</v-contextmenu-item>
+      </v-contextmenu-submenu>
+    </v-contextmenu>
+    <div class="contextmenu-pad" v-contextmenu:contextmenu>
+      右键点击此区域
+    </div>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick (vm, event) {
+      this.$message({
+        message: `你点击了${vm.$slots.default[0].text}`,
+        type: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style/pub.scss';
+</style>

src/pages/demo/components/icon/icon.vue

@@ -9,12 +9,12 @@
 </template>
 
 <style lang="scss">
+@import '~@/assets/style/public.scss';
 .icon-class-demo {
   transition: all .3s;
   font-size: 100px;
   color: #409EFF;
-  cursor: pointer;
+  @extend %unable-select;
-  user-select: none;
   &:hover{
     color: #F56C6C;
     transform: scale(1.2) rotate(30deg);

src/pages/demo/components/icon/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <d2-container>
+  <d2-container type="full">
     <template slot="header">
       <el-radio-group v-model="showIndex" size="mini">
         <el-radio-button

src/pages/demo/components/scrollbar/index.vue

@@ -1,7 +1,7 @@
 <template>
   <d2-container>
-    <template slot="header">自定义滚动条</template>
+    <template slot="header">Element 滚动条组件</template>
-    <el-card shadow="never" class="demo-scrollbar-card">
+    <el-card shadow="never" class="demo-scrollbar-card d2-mb">
       <div class="demo-scrollbar-card-inner">
         <el-scrollbar>
           <div class="demo-scrollbar-group">
@@ -12,9 +12,22 @@
         </el-scrollbar>
       </div>
     </el-card>
+    <d2-markdown :source="doc"/>
   </d2-container>
 </template>
 
+<script>
+import doc from './md/doc.md'
+export default {
+  data () {
+    return {
+      doc
+    }
+  }
+}
+</script>
+
+
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .demo-scrollbar-card {

src/pages/demo/components/scrollbar/md/doc.md

@@ -1 +1,5 @@
-[hahaha](https://github.com/ElemeFE/element/issues/2238)
+本示例演示 ElementUI 的隐藏组件 `<el-scrollbar>`，详细信可以参照 [element/issues#2238](https://github.com/ElemeFE/element/issues/2238)
+
+> ElementUI 官网以及部分涉及滚动操作的组件内部使用了 `<el-scrollbar>` 组件，虽然已经暴露到全局但是并没有相关文档介绍
+
+如果你需要更高级的滚动自定义控制，D2Admin 已经集成 [better-scroll](https://github.com/ustbhuangyi/better-scroll)，示例见 [自定义滚动](/#/demo/plugins/better-scroll/base)，[滚动定位](/#/demo/plugins/better-scroll/to)

src/pages/demo/plugins/build/index.vue

@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <template slot="header">多环境发布</template>
+    <template slot="header">环境区分</template>
     <p>当前是{{$env ? '开发' : '生产'}}环境</p>
   </d2-container>
 </template>

src/router/index.js.REMOVED.git-id

@@ -1 +1 @@
-ca9703fe75f6928e93a03443767f2b87cbe5ef2a
+919c478f2e165432104d6811b3b855f7b049ea39