Vue2を使った3階層連携の実装方法

この記事は主に淘宝網を模倣して省と地方自治体の 3 レベルの連携を実現するための Vue2 を詳しく紹介します。興味のある方は参考にしてください。タオバオの3段階連携は見栄えも良くておしゃれなので、多くの企業が真似していますが、弊社も同様です。ダウンロードして貼り付けたデータが利用可能です。リンクは次のとおりです: vue.json (これは直接データです。vue2 プロジェクトに入力するだけです。(私のプロジェクトは vue2 を使用しているため、他の属性はブログのコンテンツと一致しています) . ブログにご協力ください。 次に、この json)) をダウンロードします。

まず、ページは次のように表示されます:

次に、郡レベルのエリアに次のように 3 レベルのリンクが表示されます: (以下はクリップであり、背景色はインターセプトされていません)

これはどのようなもので、どのような形式で表示されますか? 貴社の UI ニーズに応じて、当社はポップアップ レイヤーを作成しました。 。トラフィックを節約するために、背景色は透明になり、最終的な表示は次のようになります。以下は、vue2 プロジェクトで記述された 3 レベルの連携コードと CSS スタイルです。