vueプロジェクトサードパーティコメントプラットフォーム「スムーズ」チュートリアルの使用

vueプロジェクトサードパーティコメントプラットフォーム「スムーズ」チュートリアルの使用
筆者は最近、自分のサイトを書いていますが、バックグラウンドの知識が足りないので、自分のサイトにコメント機能を加えたいと思っています.最初はIndexDBでユーザーが入力したコメントやその他の情報データを保存してバックグラウンドデータベースに保存したいと思っていましたが、接続データベース部分はどうしてもバックグラウンドで実現します.その後、「畅言」という第三者評論プラットフォームを発見し、ログイン、評論、評論管理などの操作を実現することができ、使用方法も簡単だったが、vueプロジェクトで経験の少ない私にもいくつかの難点に直面し、ネット上には多くの資料がなく、自己克服しなければならない.
使用方法
まず新しいjsファイルを作成し、「畅言」が提供する共通コードをコピーし、exportでパッケージを引き出します.

 export function createComment(){
              var appid = 'cytWmGQre';
              var conf = 'prod_98601cbedcf0ecda51195654fc1683fb';
              var width = window.innerWidth || document.documentElement.clientWidth;
              if (width < 960) {
              //  
                } })();

筆者の個人のウェブサイトはモバイル端末の適合を行ったので、コードはウェブページの適応のコードを使って、原理も実はとても簡単で、ウェブページの幅を判断して設備が端末を移動するかどうかを判断して、実はここにはまだ多くのもっと良い方法があります

function IsPC(){
    let userAgentInfo = navigator.userAgent;
    let Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    let flag = true;
    for(let i=0;i0)
        {
            flag=false;break
        }
    }
    return flag;
}
let flag = IsPC(); //true PC ，false    

この段落は筆者がモバイル端末の適合を行う際に書いたもので、デバイスのタイプを判断することでデバイスがモバイル端末を移動しているかどうかを判断するにも、一定の欠陥があるが、前のコードよりずっと良い.
後で簡単です.あなたが使用したいvueコンポーネントのimport {createComment} from "./XXX"では、XXXはあなたが作成したばかりのjsファイルを指します.その後、ライフサイクルmountedでcreateComment()を参照すると、スムーズなコメントシステムの使用が開始されます.具体的にはコンポーネントに直接ラベルdivを導入し,id属性はSOHUCSでよい.
主な問題
最初、筆者は公式の方法に従って、 // を直接導入したが、どうすればtempleteは直接このラベルを解析することができず、その後、筆者は直接 // をルートフォルダindexに導入した.htmlでは、divオブジェクトをキャプチャできないエラーが発生します.この場合、vueは仮想DOMを確立しているため、ルートフォルダに直接導入すると、Vueの仮想DOMツリーがレンダリングされずに公式に与えられたコードでvue仮想DOMツリーの要素をDOM操作することになると思います.この原因が分かったら簡単です.解決策はvueプロジェクトmountedライフサイクルでcreateComment()を実行してDOM操作を行うことです.理由も簡単です.mountedライフサイクルになってこそ、オブジェクトがhtmlにマウントされるので、実際のオブジェクトがDOM操作を行うことができます.そうしないと、必要な要素がキャプチャされません.