clipboard

Author: kongbin02

package-lock.json

@@ -15,6 +15,7 @@
     "sortablejs": "^1.10.0-rc3",
     "text-loader": "0.0.1",
     "vue": "^2.5.2",
+    "vue-clipboard2": "^0.3.1",
     "vue-code-diff": "0.0.4",
     "vue-markdown": "^2.2.4",
     "vue-router": "^3.0.1",

package.json

@@ -9,6 +9,11 @@ const left_menu_data = [
     to: '/diff',
     img:'../../static/img/diff.png'
   },
+  {
+    label: '复制文件',
+    to: '/clipboard',
+    img:'../../static/img/clipboard.png'
+  },
 ]
 
 export {left_menu_data}

src/layouts/left_menu_data.js

@@ -5,6 +5,8 @@ import App from './App'
 import router from './router'
 import Quasar from './plugins/quasar'
 import './css/theme'
+import Clipboard from './plugins/clipboard'
+import Notify from './plugins/PpNotify'
 
 Vue.config.productionTip = false
 
@@ -19,7 +21,7 @@ const app = {
 };
 
 
-[Quasar].forEach(plugin => plugin({
+[Quasar, Clipboard, Notify].forEach(plugin => plugin({
   app,
   router,
   Vue

src/main.js

@@ -0,0 +1,38 @@
+export default {
+  name: 'clipboard_index',
+  data: () => ({
+    value: '复制文本控件使用的是vue-clipboard2,可方便的实现复制需求。'
+  }),
+  methods: {
+    copy_value() {
+      this.$copyText(this.value).then(() => {
+        this.$q.ok('已经复制到粘贴板！')
+      }, () => {
+        this.$q.err('复制失败！')
+      })
+    },
+  },
+  render(h) {
+    return h('div', {
+      staticClass: 'row no-wrap q-pa-sm'
+    }, [
+      h('div', {
+        staticClass: 'pp-border-4 q-pa-sm text-tertiary test-weight-medium'
+      }, [
+        this.value
+      ]),
+      h('q-btn', {
+        props: {
+          label: '点击复制',
+          flat: true,
+          color: 'primary'
+        },
+        on: {
+          click: () => {
+            this.copy_value()
+          }
+        }
+      })
+    ])
+  }
+}

src/pages/clipboard/index.js

@@ -6,38 +6,42 @@ export default {
   methods: {
     render_module_item(h, d) {
       return h('div', {
-        staticClass: 'pp-border-4 cursor-pointer pp-intro-div q-pa-sm',
+        staticClass: 'q-pa-sm',
         style: {
           height: '160px',
-          width:'400px'
+          width: '400px'
         },
-        on: {
-          click: () => this.$router.push({path: d.url})
-        }
       }, [
         h('div', {
-          staticClass: 'q-mt-sm row no-wrap items-center'
+          staticClass: 'pp-border-4 cursor-pointer pp-intro-div q-pa-sm full-height',
+          on: {
+            click: () => this.$router.push({path: d.url})
+          }
         }, [
-          h('img', {
-            style: {
-              width: '40px',
-              height: '40px',
-              borderRadius:'50%'
-            },
-            attrs: {
-              src: d.img
-            }
-          }),
           h('div', {
-            staticClass: 'q-ml-sm text-weight-bold text-tertiary font-20'
+            staticClass: 'row no-wrap items-center'
           }, [
-            d.title
+            h('img', {
+              style: {
+                width: '40px',
+                height: '40px',
+                borderRadius: '50%'
+              },
+              attrs: {
+                src: d.img
+              }
+            }),
+            h('div', {
+              staticClass: 'q-ml-sm text-weight-bold text-tertiary font-20'
+            }, [
+              d.title
+            ]),
           ]),
-        ]),
-        h('div', {
-          staticClass: 'text-weight-medium text-faded font-13 q-mt-sm'
-        }, [
-          d.description
+          h('div', {
+            staticClass: 'text-weight-medium text-faded font-13 q-mt-sm'
+          }, [
+            d.description
+          ])
         ])
       ])
     },

src/pages/home/index.js

@@ -0,0 +1,25 @@
+.pp-notification-top-enter {
+  opacity: 0;
+  -webkit-transform: translateY(-50px);
+  transform: translateY(-50px);
+  z-index: 9499;
+}
+
+.pp-notification-top-leave-to {
+  opacity: 0;
+  z-index: 9499;
+}
+
+.pp-notification-top-right-enter {
+  opacity: 0;
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+  z-index: 9499;
+}
+
+.pp-notification-top-right-leave-to {
+  opacity: 0;
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+  z-index: 9499;
+}