为vue接入畅言评论系统

前言

在为vue框架接入畅言之前,我以为只要按照畅言所提供的安装文档就可以了,没想到畅言只提供了传统页面的安装方法,直接引入根本就不适用类似于Vue框架的单页面,所以只能自己动手了

配置畅言

http://changyan.kuaizhan.com/ 官网上按照步骤来就行,然后在http://changyan.kuaizhan.com/install/code/pc拿到配置参数appidconf的值

vue组件

以下就是vue的配置,已经组件化了,只要在props参数给值和配置参数appidconf就可以使用

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
<template> <div class="comment-box"> <div id="SOHUCS" :sid="'ddp-blog-'+postId" ></div> </div> </template> <script> export default { name: 'comment_changyan', props: { postId: { type: [String, Number], required: true } }, mounted(){ this.$nextTick(()=>{ const appid = '填入appid值'; const conf = '填入conf值''; this.loadJs("https://changyan.sohu.com/upload/changyan.js", function () { window.changyan && window.changyan.api.config({ appid: appid, conf: conf }) }); }) }, methods: { loadJs(url, cb){ try { const c = document.getElementsByTagName("head")[0] || document.head || document.documentElement; const b = document.createElement("script"); b.setAttribute("type","text/javascript"); b.setAttribute("charset","UTF-8"); b.setAttribute("src", url); b.setAttribute("id", 'changyan_pc_js'); if(window.attachEvent){ b.onreadystatechange = function(){ const e = b.readyState; if(e === "loaded" || e === "complete"){ b.onreadystatechange = null; cb && cb(); } } }else{ if(cb){ b.onload = cb } } c.appendChild(b) } catch (error) { cb && cb(); } } }, beforeDestroy() { try { const removeRep = /^http(s)?\:\/\/changyan\./ const $head = document.getElementsByTagName("head")[0] || document.head || document.documentElement; const $script = $head.querySelectorAll('script'); $script.forEach((item, index) => { const src = item.getAttribute('src'); if(src && removeRep.test(src)){ $head.removeChild(item) } }); for (const key in window) { if (/^(changyan(\d)?|cyan)/.test(key)){ window[key] = undefined; } } } catch (error) {} } } </script> <style scoped> .comment-box{ background: #fff; padding: 15px } </style>

在安装的过程中,和官方所写的文档没什么区别,重点是在beforeDestroy的生命周期中,当路由跳转时一定要对畅言进行销毁,否则当再次进来时将会出现乱七八糟的错误。

本文于 2019/4/18 下午 发布在 编程 分类下,当前已被围观 480 次

相关标签:VUE

永久地址:https://blog.pandashuai.com/article/25