feature: add ability to copy URL. Fixes #244 (#287)

dubbo-admin-ui/package.json

@@ -17,6 +17,7 @@
     "js-yaml": "^3.12.0",
     "jsoneditor": "^5.26.2",
     "vue": "^2.5.2",
+    "vue-clipboard2": "^0.2.1",
     "vue-i18n": "^8.6.0",
     "vue-router": "^3.0.1",
     "vuetify": "^1.2.2",

dubbo-admin-ui/src/components/ServiceDetail.vue

@@ -61,8 +61,9 @@
                           small
                           slot="activator"
                           color="primary"
+                          @click="toCopyText(props.item.url)"
                   >
-                    URL
+                    {{$t('copyUrl')}}
                   </v-btn>
                   <span>{{props.item.url}}</span>
                 </v-tooltip></td>
@@ -205,6 +206,11 @@
           result = result + parameterTypes[i] + ' '
         }
         return result.trim()
+      },
+      toCopyText (text) {
+        this.$copyText(text).then(() => {
+          this.$notify.success(this.$t('copySuccessfully'))
+        }, () => {})
       }
     },
     computed: {

dubbo-admin-ui/src/lang/en.js

@@ -131,6 +131,8 @@ export default {
   fail: 'FAIL',
   detail: 'Detail',
   more: 'More',
+  copyUrl: 'Copy URL',
+  copySuccessfully: 'Copied',
   test: 'Test',
   placeholders: {
     searchService: 'Search by service name'

dubbo-admin-ui/src/lang/zh.js

@@ -131,6 +131,8 @@ export default {
   fail: '失败',
   detail: '详情',
   more: '更多',
+  copyUrl: '复制 URL',
+  copySuccessfully: '已复制',
   test: '测试',
   placeholders: {
     searchService: '通过服务名搜索服务'

dubbo-admin-ui/src/main.js

@@ -26,6 +26,7 @@ import { store } from './store'
 import Notify from './components/public/notify'
 import { AXIOS } from './components/http-common'
 import i18n from './lang'
+import VueClipboard from 'vue-clipboard2'
 
 Vue.use(Vuetify, {
   lang: {
@@ -38,6 +39,9 @@ Vue.prototype.$axios = AXIOS
 
 Vue.config.productionTip = false
 
+VueClipboard.config.autoSetContainer = true
+Vue.use(VueClipboard)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',