源码按钮

Former-commit-id: 4d1b3a8887b907db7555bfe53648ed762dba9892 [formerly 4d1b3a8887b907db7555bfe53648ed762dba9892 [formerly 4d1b3a8887b907db7555bfe53648ed762dba9892 [formerly 4d1b3a8887b907db7555bfe53648ed762dba9892 [formerly 2ef0e6fdbf2fc0116fb75086242315f3dbec48ea [formerly 58a909b244521701be296255b19109ede6f6e026]]]]]
Former-commit-id: ee181b29e947f0b153e512b4c52abfe9d76be811
Former-commit-id: da0acd29407fc35750d0c35a3d081de33323a5db
Former-commit-id: e2767964b4b6a721a459b8a86850c7b2d4629436 [formerly 3b3395ce0f85d801a459e6d4ab85c5ddf074e1ea]
Former-commit-id: db2f2c5ee8fc19e139213b6b0defd8a7668c8e58
Former-commit-id: 6ec66b8e7d1463e2538d6adb6df716220859e307
Former-commit-id: 3f4f38e1932f4e974246e2247562c18c8bc4777d
Former-commit-id: 52522c2f656af093164cee9c3cbce4310bced354
Former-commit-id: 2b80d11df99ae511dfc7155e33837fae2f0ded2e

src/components/d2-container/components/d2-source.vue

@@ -1,9 +1,45 @@
 <template>
-  <div class="d2-source">
+  <div
+    class="d2-source"
+    :class="{ 'd2-source--active': isActive }"
+    @click="handleClick">
     <d2-icon name="code"/> SourceCode
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    // 文件路径
+    filename: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isActive: false
+    }
+  },
+  mounted () {
+    // 一秒后显示按钮
+    setTimeout(() => {
+      this.isActive = true
+    }, 1000)
+  },
+  methods: {
+    // 点击按钮的时候跳转到源代码
+    handleClick () {
+      const file = this.filename.split('?')[0]
+      const url = file
+        ? `https://github.com/d2-projects/d2-admin/blob/master/${file}`
+        : 'https://github.com/d2-projects/d2-admin'
+      this.$open(url)
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .d2-source {
@@ -11,8 +47,10 @@
   $paddingLR: 15px;
   $paddingTB: 7px;
   $fontSize: 12px;
+  $rightOuter: $paddingLR / 2;
+  opacity: 0;
   position: absolute;
-  right: - $borderRadius;
+  right: - $borderRadius - $rightOuter;
   bottom: 20px;
   font-size: $fontSize;
   line-height: $fontSize;
@@ -25,7 +63,11 @@
   color: #FFF;
   transition: all .3s;
   @extend %unable-select;
+  &.d2-source--active {
+    opacity: 1;
+  }
   &:hover {
+    right: - $borderRadius;
     background-color: rgba(#000, .9);
   }
 }

src/components/d2-container/index.js

@@ -53,7 +53,9 @@ export default {
           scroll: e => this.$emit('scroll', e)
         }
       }, slots),
-      h(d2Source)
+      h(d2Source, {
+        props: this.$attrs
+      })
     ])
   }
 }