big step

src/views/ViewNote.vue

@@ -68,6 +68,21 @@
 </style>
 
 <style>
+#qrUrl {
+  color: #ed4014;
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
+}
+
+#qrUrl::selection {
+  background-color: #ed4014;
+  color: #ffffff;
+}
+
+#copyBtn {
+  color: #ed4014;
+  font-size:large;
+}
+
 .ivu-btn-text:focus {
   margin-top: -3px;
   box-shadow: none !important;
@@ -168,7 +183,7 @@
                 <Button-group size="large">
 
                   <Button aria-label="share" type="error"
-                    style="margin-left:5px; border-radius: 0px;font-size: 23px; font-family: Arial, sans-serif"
+                    style="margin-left:5px; border-radius: 0px;font-size: 19px; font-family: Arial, sans-serif"
                     @click="showShareModel()" icon="md-cloud-done">{{ state.ttlDesc }}</Button>
 
                   <Button aria-label="menu" type="error" style="margin-left:5px; border-radius: 0px;font-size: 24px;"
@@ -236,23 +251,34 @@
 
     </Layout>
 
-    <Modal v-model="model.showShare" width="330" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }">
-      <p style="text-align: center;">
-        <canvas id="qrimg" class=""></canvas>
+    <Modal v-model="model.showShare" width="360" footer-hide class-name="qrmodal" :styles="{ borderRadius: 0 }">
+      <p style="text-align: center;
+          z-index: 1000;
+          position: absolute;
+          top: -2px;
+          left: 0px;
+          width: 100%;">
+        <Tag style="border-radius: 0px;" v-show="model.copyTip" color="#ed4014" text="">Url Copied.</Tag>
       </p>
-      <p style="text-align: center;">
-        <span id="tag-copy" class="noteUrl" :data-clipboard-text="noteForm.noteUrl" data-clipboard-action="copy">{{
-            noteForm.noteUrl
-        }}</span>
+      <p style="text-align: center;margin-top:20px;line-height:100%">
+        <span style="margin-right:3px;" id="copyBtn"><Icon type="md-copy" /></span><span id="qrUrl">{{ noteForm.noteUrl }}</span>
+      </p>
+
+      <p style="text-align: center;margin-top:5px;">
+        <canvas id="qrImg" class=""></canvas>
+      </p>
+      <p style="text-align: center;margin-top:10px;">
+        <Button type="error" style="border-radius: 0px;font-size:19px;"
+          @click="closeShareModel()">{{$t("button.close")}}</Button>
       </p>
     </Modal>
 
-    <Modal v-model="model.showDelete" width="330" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
+    <Modal v-model="model.showDelete" width="360" footer-hide class-name="fnmodal" :styles="{ borderRadius: 0 }">
       <p style="text-align: center;font-size:medium;margin-bottom: 20px;">
         {{ $t("message.askTodelete") }}
       </p>
       <p style="text-align: center;">
-        <Button type="error" :loading="model.deleting" style="border-radius: 0px;" @click="dropNote()">{{
+        <Button type="error" :loading="model.deleting" style="border-radius: 0px;font-size:19px;" @click="dropNote()">{{
             $t("button.yes")
         }}</Button>
       </p>
@@ -308,6 +334,7 @@ export default {
         showShare: false,
         deleting: false,
         showDownloadText: false,
+        copyTip: false,
       },
       toTopState: false,
       showMenuState: false,
@@ -343,7 +370,6 @@ export default {
       this.secret.cipher = "00000000000000000000000000000000";//noteMeta.cipher; //读者有没有值可配置
       this.secret.md5 = noteMeta.md5;
 
-
       this.startClock();
 
       storage.local.dynamicClear();
@@ -360,7 +386,12 @@ export default {
 
   },
   mounted() {
-    //this.bindCopyTextEvent();
+
+    let stateInfo = storage.session.getText(this.secret.storeKey + "_share");
+    if (stateInfo == '1') {
+      storage.session.setText(this.secret.storeKey + "_share", '0');
+      this.showShareModel();
+    }
 
     const myObserver = new ResizeObserver(entries => {
       // iterate over the entries, do something.
@@ -437,7 +468,7 @@ export default {
     },
     showShareModel() {
       this.model.showShare = true;
-      let qrimg = document.getElementById("qrimg");
+      let qrimg = document.getElementById("qrImg");
       let qrurl = "https://flagnote.com/" + this.noteForm.key;
       var opts = {
         errorCorrectionLevel: 'Q',
@@ -452,6 +483,12 @@ export default {
         }
       }
       QRCode.toCanvas(qrimg, qrurl, opts)
+
+      storage.session.setText(this.secret.storeKey + "_share", '1');
+    },
+    closeShareModel() {
+      this.model.showShare = false;
+      storage.session.setText(this.secret.storeKey + "_share", '0');
     },
     showDeleteModel() {
       this.model.showDelete = true;
@@ -537,9 +574,18 @@ export default {
     },
     bindCopyUrlEvent() {
       let that = this;
-      var clipboard = new Clipboard("#tag-copy")
+      var clipboard = new Clipboard("#copyBtn", {
+        target: function () {
+          return document.querySelector('#qrUrl');
+        }
+      })
       clipboard.on('success', function () {
-        that.$Message.success({ content: 'url copied.' });
+        that.model.copyTip = true;
+        let tipTimer = setInterval(() => {
+          that.model.copyTip = false;
+          clearInterval(tipTimer);
+        }, 1500);
+
       });
 
       clipboard.on('error', function () {