diff --git a/src/components/demo/d2-demo-link-btn/index.vue b/src/components/demo/d2-demo-link-btn/index.vue
new file mode 100644
index 00000000..fa234a18
--- /dev/null
+++ b/src/components/demo/d2-demo-link-btn/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <el-button-group>
+    <el-button size="mini">依赖</el-button>
+    <el-button size="mini" @click="$open(link)">
+      <d2-icon name="link"/>
+      {{link}}
+    </el-button>
+  </el-button-group>
+</template>
+
+<script>
+export default {
+  name: 'd2-demo-link-btn',
+  props: {
+    link: {
+      type: String,
+      required: false,
+      default: 'https://github.com/FairyEver'
+    }
+  }
+}
+</script>
diff --git a/src/components/demo/register.js b/src/components/demo/register.js
index 6e102fec..8d9990d6 100644
--- a/src/components/demo/register.js
+++ b/src/components/demo/register.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
 
+Vue.component('d2-demo-link-btn', () => import('@/components/demo/d2-demo-link-btn'))
 Vue.component('d2-demo-page-header', () => import('@/components/demo/d2-demo-page-header'))
 Vue.component('d2-demo-page-cover', () => import('@/components/demo/d2-demo-page-cover'))
diff --git a/src/pages/demo/plugins/day/index.vue b/src/pages/demo/plugins/day/index.vue
index 2892ff42..3c99cea5 100644
--- a/src/pages/demo/plugins/day/index.vue
+++ b/src/pages/demo/plugins/day/index.vue
@@ -2,13 +2,7 @@
   <d2-container type="full">
     <template slot="header">日期计算</template>
     <template slot="footer">
-      <el-button-group>
-        <el-button size="mini">依赖</el-button>
-        <el-button size="mini" @click="$open(link)">
-          <d2-icon name="link"/>
-          {{link}}
-        </el-button>
-      </el-button-group>
+      <d2-demo-link-btn :link="link"/>
     </template>
   </d2-container>
 </template>