之前还在使用html编写代码的时候,就已经使用过畅言评论了,总体感觉还好,毕竟那时候是免费的,不能要求太高不是,现在一直在用vue开发项目,发现百度上并没有vue使用畅言的例子,于是就有了这篇博文,希望可以帮助到其他人。
- 首先写一个vue原型方法,用来动态加载外部script。
Vue.prototype.$loadScript = (url, callback) => {
let script = document.createElement('script');
if (script.readyState) {
// IE浏览器
script.onreadystatechange = function () {
if (script.readyState === 'loaded' || script.readyState === 'complete') {
script.onreadystatechange = null;
callback();
}
}
} else {
// 其他浏览器
script.onload = function () {
callback();
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
- 在生命周期中,加载畅言的script。
<template>
<div id="SOHUCS" sid="请将此处替换为配置SourceID的语句"></div>
</template>
mounted(){
window.changyan = undefined;
window.cyan = undefined;
this.$loadScript("https://changyan.sohu.com/upload/changyan.js", () => {
window.changyan.api.config({
appid: "#####", // 此处换成你的畅言应用的appid,
conf: "#################" , // 此处换成你畅言应用的conf。
});
});
}
至此,就可以在vue中完美的运行畅言评论系统啦。
还有一种方式是畅言官网上的安装方法,需要用到Jquery,我不是很推崇这种做法,有需要的同学可以试试。
- 安装Jquery
npm install jquery -S
- 在vue页面中引入Jquery。
<script>
import $ from 'jquery';
mounted(){
window.changyan = undefined;
window.cyan = undefined;
$.getScript("https://changyan.sohu.com/upload/changyan.js", () => {
window.changyan.api.config({
appid: "#####", // 此处换成你的畅言应用的appid,
conf: "#################" , // 此处换成你畅言应用的conf。
});
});
}
</script
如有疑问,请在评论上提出,谢谢,我看到会及时回复的!