doc(site): add code copy function.

docs/index.html

@@ -30,5 +30,5 @@
     <script crossOrigin="Anonymous" src="//webapp.didistatic.com/static/webapp/shield/z/omega/omega/0.2.7/omega.min.js"></script>
     <script async defer src="//buttons.github.io/buttons.js"></script>
     <!-- built files will be auto injected -->
-  <script type="text/javascript" src="/mand-mobile/static/js/manifest.d29eeaf5.js"></script><script type="text/javascript" src="/mand-mobile/static/js/vendor.6bffc910.js"></script><script type="text/javascript" src="/mand-mobile/static/js/app.6b4d3855.js"></script></body>
+  <script type="text/javascript" src="/mand-mobile/static/js/manifest.b2949970.js"></script><script type="text/javascript" src="/mand-mobile/static/js/vendor.e294900c.js"></script><script type="text/javascript" src="/mand-mobile/static/js/app.5c70425a.js"></script></body>
 </html>

docs/static/js/manifest.b2949970.js

@@ -1 +1 @@
-(function(a){function b(c){if(d[c])return d[c].exports;var e=d[c]={i:c,l:!1,exports:{}};return a[c].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c=window.webpackJsonp;window.webpackJsonp=function(d,f,g){for(var h,j,k,l=0,i=[];l<d.length;l++)j=d[l],e[j]&&i.push(e[j][0]),e[j]=0;for(h in f)Object.prototype.hasOwnProperty.call(f,h)&&(a[h]=f[h]);for(c&&c(d,f,g);i.length;)i.shift()();if(g)for(l=0;l<g.length;l++)k=b(b.s=g[l]);return k};var d={},e={43:0};b.e=function(a){function c(){h.onerror=h.onload=null,clearTimeout(i);var b=e[a];0!==b&&(b&&b[1](new Error("Loading chunk "+a+" failed.")),e[a]=void 0)}var d=e[a];if(0===d)return new Promise(function(a){a()});if(d)return d[2];var f=new Promise(function(b,c){d=e[a]=[b,c]});d[2]=f;var g=document.getElementsByTagName("head")[0],h=document.createElement("script");h.type="text/javascript",h.charset="utf-8",h.async=!0,h.timeout=12e4,b.nc&&h.setAttribute("nonce",b.nc),h.src=b.p+"static/js/"+({0:"DocsComponentsBusinessCashier",1:"DocsComponentsBusinessCaptcha",2:"DocsComponentsFeedbackTabPicker",3:"DocsComponentsFormRadio",4:"DocsComponentsBasicTabs",5:"DocsComponentsBasicDropMenu",6:"DocsComponentsFeedbackSelector",7:"DocsComponentsFormField",8:"DocsComponentsFormInputItem",9:"DocsComponentsFeedbackDatePicker",10:"DocsComponentsFeedbackPicker",11:"DocsComponentsBasicTabBar",12:"DocsComponentsBasicSwiper",13:"DocsComponentsBasicImageReader",14:"DocsComponentsBusinessResultPage",15:"DocsComponentsBasicStepper",16:"DocsComponentsFeedbackTip",17:"DocsComponentsFeedbackToast",18:"DocsComponentsBasicSteps",19:"DocsComponentsBasicActionBar",20:"DocsComponentsFormNumberKeyboard",21:"DocsComponentsFeedbackPopup",22:"DocsComponentsFeedbackActionSheet",23:"DocsComponentsFeedbackDialog",24:"DocsComponentsFormCodebox",25:"DocsComponentsBusinessLandscape",26:"DocsComponentsBasicImageViewer",27:"DocsComponentsBasicButton",28:"DocsComponentsFormAgree",29:"DocsComponentsBusinessChart",30:"DocsComponentsBasicNoticeBar",31:"DocsComponentsFormSwitch",32:"DocsComponentsBasicTag",33:"DocsComponentsBasicIcon",34:"DocsTheme",35:"DocsStarted",36:"DocsIntroduce",37:"DocsDevelopment",38:"DocsChangelog",39:"DesignResource",40:"DocsPreview"}[a]||a)+"."+{0:"fa6864aa",1:"f7657bf3",2:"abf87572",3:"eca065b7",4:"645b80d2",5:"c8846cd0",6:"9211b8da",7:"753502e9",8:"b5f670a4",9:"1d179b68",10:"21ff4a29",11:"91b038f4",12:"5a6a8af9",13:"1cf4d648",14:"05aa7ec9",15:"037400ae",16:"1fd76753",17:"f4e7a1e8",18:"c37115fb",19:"33b63098",20:"443420c1",21:"04765b48",22:"29894954",23:"1a21c78c",24:"45b64362",25:"64f018fe",26:"fd9f3d7b",27:"55b1d9a0",28:"600adef9",29:"2031c84a",30:"6535c1af",31:"9f456b78",32:"2cfed834",33:"a31e6018",34:"3e7f67e7",35:"86b30f82",36:"8516bcfd",37:"b0460d73",38:"ee73cf7c",39:"8d08f971",40:"f67a2e19"}[a]+".js";var i=setTimeout(c,12e4);return h.onerror=h.onload=c,g.appendChild(h),f},b.m=a,b.c=d,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a["default"]}:function(){return a};return b.d(c,"a",c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p="/mand-mobile/",b.oe=function(a){throw console.error(a),a}})([]);
+(function(a){function b(c){if(d[c])return d[c].exports;var e=d[c]={i:c,l:!1,exports:{}};return a[c].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c=window.webpackJsonp;window.webpackJsonp=function(d,f,g){for(var h,j,k,l=0,i=[];l<d.length;l++)j=d[l],e[j]&&i.push(e[j][0]),e[j]=0;for(h in f)Object.prototype.hasOwnProperty.call(f,h)&&(a[h]=f[h]);for(c&&c(d,f,g);i.length;)i.shift()();if(g)for(l=0;l<g.length;l++)k=b(b.s=g[l]);return k};var d={},e={43:0};b.e=function(a){function c(){h.onerror=h.onload=null,clearTimeout(i);var b=e[a];0!==b&&(b&&b[1](new Error("Loading chunk "+a+" failed.")),e[a]=void 0)}var d=e[a];if(0===d)return new Promise(function(a){a()});if(d)return d[2];var f=new Promise(function(b,c){d=e[a]=[b,c]});d[2]=f;var g=document.getElementsByTagName("head")[0],h=document.createElement("script");h.type="text/javascript",h.charset="utf-8",h.async=!0,h.timeout=12e4,b.nc&&h.setAttribute("nonce",b.nc),h.src=b.p+"static/js/"+({0:"DocsComponentsBusinessCashier",1:"DocsComponentsBusinessCaptcha",2:"DocsComponentsFeedbackTabPicker",3:"DocsComponentsFormRadio",4:"DocsComponentsBasicTabs",5:"DocsComponentsBasicDropMenu",6:"DocsComponentsFeedbackSelector",7:"DocsComponentsFormField",8:"DocsComponentsFormInputItem",9:"DocsComponentsFeedbackDatePicker",10:"DocsComponentsFeedbackPicker",11:"DocsComponentsBasicTabBar",12:"DocsComponentsBasicSwiper",13:"DocsComponentsBasicImageReader",14:"DocsComponentsBusinessResultPage",15:"DocsComponentsBasicStepper",16:"DocsComponentsFeedbackTip",17:"DocsComponentsFeedbackToast",18:"DocsComponentsBasicSteps",19:"DocsComponentsBasicActionBar",20:"DocsComponentsFormNumberKeyboard",21:"DocsComponentsFeedbackPopup",22:"DocsComponentsFeedbackActionSheet",23:"DocsComponentsFeedbackDialog",24:"DocsComponentsFormCodebox",25:"DocsComponentsBusinessLandscape",26:"DocsComponentsBasicImageViewer",27:"DocsComponentsBasicButton",28:"DocsComponentsFormAgree",29:"DocsComponentsBusinessChart",30:"DocsComponentsBasicNoticeBar",31:"DocsComponentsFormSwitch",32:"DocsComponentsBasicTag",33:"DocsComponentsBasicIcon",34:"DocsTheme",35:"DocsStarted",36:"DocsIntroduce",37:"DocsDevelopment",38:"DocsChangelog",39:"DesignResource",40:"DocsPreview"}[a]||a)+"."+{0:"db50482d",1:"f58309c8",2:"b56ecbea",3:"ac648ce7",4:"20a6fce6",5:"beff9540",6:"25fdb9bc",7:"225b2926",8:"38835373",9:"232ece2a",10:"549bb1ca",11:"2163285e",12:"4422e136",13:"6fb51126",14:"82872352",15:"edb3ca4c",16:"a0eda83c",17:"dc34ee41",18:"d1b7b7cb",19:"5b33d121",20:"052e3f55",21:"55c8e41e",22:"d4c4fe03",23:"33ea093f",24:"dabd6a7a",25:"a19053d2",26:"7d08ea03",27:"d7f69f48",28:"7e449b5b",29:"3b48fa43",30:"67aeed61",31:"b9b99675",32:"3617da88",33:"ee930fbc",34:"36e0e62d",35:"43f252d0",36:"cbbeadaa",37:"30d38ba5",38:"cda07bfa",39:"66176142",40:"b7dbd5fb"}[a]+".js";var i=setTimeout(c,12e4);return h.onerror=h.onload=c,g.appendChild(h),f},b.m=a,b.c=d,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a["default"]}:function(){return a};return b.d(c,"a",c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p="/mand-mobile/",b.oe=function(a){throw console.error(a),a}})([]);

site/build/bin/mfe-blog-generate.js

@@ -51,7 +51,7 @@ function generateDemoVue(outputPath, demoPath = []) {
 
     const demoContent = fs.readFileSync(demo).toString()
     imports[demoName] = `./${demoFileName}`
-    exports[index] = `{ component: ${demoName}, code: ${JSON.stringify(highlight(demoContent))} }`
+    exports[index] = `{ component: ${demoName}, code: ${JSON.stringify(highlight(demoContent))}, raw: "${encodeURI(demoContent)}" }`
 
     fs.writeFileSync(`${outputPath}/${demoFileName}`, demoContent)
   }

site/docs/started.md

@@ -73,6 +73,8 @@ Vue.use(mandMobile)
 
 #### 使用前准备
 
+> 为避免因[浏览器兼容性](https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile)引起的点击问题，建议引入[FastClick](https://github.com/ftlabs/fastclick)
+
 ##### `px` to `rem`
 
 组件样式以`px`为单位，并且以`iPhone6`屏幕 “物理像素” 宽度`750`为基准 (即普通 “逻辑像素” 值的`2`倍大小)。在实际项目中，可根据具体情况使用`postcss-pxtorem`把`px`单位转成`rem`，从而实现不同设备下等比缩放的效果。

site/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "mand-mobile": "^1.0.7",
     "vue": "^2.5.2",
+    "vue-clipboard2": "^0.1.0",
     "vue-qrcode-component": "^2.1.1",
     "vue-router": "^3.0.1"
   },

site/theme/default/components/Doc.vue

@@ -47,6 +47,8 @@
                   </div>
                 </div>
                 <div class="doc-demo-box-code">
+                  <button type="copy" class="copy"
+                    v-clipboard:copy="decodeURI(demo.raw)">复制代码</button>
                   <pre>
                     <code class="lang-vue" v-html="demo.code"></code>
                   </pre>
@@ -86,6 +88,8 @@
                   </div>
                 </div>
                 <div class="doc-demo-box-code">
+                  <button type="copy" class="copy"
+                    v-clipboard:copy="decodeURI(demo.raw)">复制代码</button>
                   <pre>
                     <code class="lang-vue" v-html="demo.code"></code>
                   </pre>
@@ -424,6 +428,7 @@ export default {
       ul>li
         list-style none !important
   .doc-demo-box-code
+    position relative
     display none
     width 100%
     overflow hidden
@@ -468,6 +473,23 @@ export default {
       position fixed
       bottom 0
 
+button.copy
+  position absolute
+  top 0
+  right 0
+  z-index 100
+  color #999
+  background #fff
+  border none
+  height 30px
+  line-height 30px
+  box-shadow none
+  &:hover
+    color #256fa3
+  &:active, &:visited, &:focus
+    box-shadow none
+    outline none
+
 @media (max-width: 1500px)
   .doc-demo-box-preview-box
     max-width 400px !important

site/theme/default/main.js

@@ -3,9 +3,11 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import VueClipboard from 'vue-clipboard2'
 import { setScale } from './assets/js/util'
 
 Vue.config.productionTip = false
+Vue.use(VueClipboard)
 
 if ($(window).width() > 750) {
   setScale(0.5)