feature: msg link

zhuchuanjun · Sep 20, 2018 · d973317 · d973317
1 parent 333ff74
commit d973317
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "vivus": "^0.4.1",
     "vue": "^2.2.2",
     "vue-cropper": "^0.4.0",
-    "vue-router": "^2.3.0"
+    "vue-router": "^2.3.0",
+    "xss-filters-es6": "^1.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

diff --git a/src/components/Message/index.vue b/src/components/Message/index.vue
@@ -9,28 +9,35 @@
                 <img :src="img" alt="" class="img">
             </div>
             <span v-if="msg">
-                {{msg}}
+                <span v-html="linkMsg" class="msg"></span>
+                <!-- {{msg | link}} -->
             </span>
         </div>
     </div>
 </template>
 
 <script type="text/ecmascript-6">
     import dateFormat from '../../utils/date'
+    import {inHTMLData, uriInUnQuotedAttr} from 'xss-filters-es6';
     export default{
         props: ['name', 'img', 'msg', 'head', 'mytime', 'is-self'],
         computed: {
             getdate() {
                 return dateFormat(new Date(this.mytime), 'yyyy-MM-dd HH:mm:ss')
+            },
+            linkMsg() {
+                const filterValue = inHTMLData(this.msg);
+                return filterValue.replace(/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g, function($0, $1) {
+                    const url = $0;
+                    return `<a style="color: #b374ff" href="${uriInUnQuotedAttr(url)}" target="_blank">${uriInUnQuotedAttr(url)}</a>`;
+                });
             }
         },
         mounted() {
             this.$refs.msg.scrollIntoView()
         }
-
     }
 </script>
-
 <style lang="stylus" rel="stylesheet/stylus" scoped>
     .clear
         margin-top: 10px
@@ -53,8 +60,9 @@
                 -ms-text-overflow: ellipsis
                 text-overflow: ellipsis
                 white-space: nowrap
-            span
+            .msg 
                 word-break: break-all
+
             .time
                 position: absolute
                 top: -40px