方法: 1. コンポーネントをダウンロードし、uni-app ルート ディレクトリに抽出します; 2. 「コンポーネント ファイル アドレスからコンポーネント名をインポート」という構文を使用して、指定されたページにコンポーネントをインポートします。コンポーネント オプション Component で定義します。 4. テンプレート ノードで、コンポーネントの使用手順に従い、コンポーネントを呼び出し、値を渡します。
#このチュートリアルの動作環境: Windows 7 システム、ユニアプリ バージョン 2.5.1、DELL G3 コンピューター。
この記事では、badge (デジタル バッジ) を例として、プラグイン マーケットからコンポーネントをダウンロードしてインポートする方法を説明します。
1. コンポーネントをダウンロードします。
プラグイン マーケットbadge の詳細ページから、[ダウンロード] をクリックします。ダウンロードが完了したら、
uni-app ルート ディレクトリに解凍します。
2. コンポーネントのインポート
page-a.vue ページで
badge を使用し、次に ## を使用する必要があるとします。次のように、#page-a.vue
の script
ノードの下に badge
コンポーネントをインポートします: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import uniBadge from "@/components/uni-badge/uni-badge.vue"</pre><div class="contentsignin">ログイン後にコピー</div></div>
オプションで badge
コンポーネントを次のように定義します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">export default {
data() {
return { /* ... */ }
},
components: {
uniBadge
}
}</pre><div class="contentsignin">ログイン後にコピー</div></div>
から複数のコンポーネントをダウンロードして使用する場合プラグイン マーケット、各コンポーネント これらはすべて
オプションで定義し、カンマで区切る必要があります。
template
ノードで、コンポーネントの使用手順に従い、コンポーネントを呼び出し、値を渡します <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge></pre><div class="contentsignin">ログイン後にコピー</div></div>
完全なコード例は次のとおりです:
<script> import uniBadge from "@/components/uni-badge/uni-badge.vue" /* import 导入的其它组件 */ export default { data() { return { /* ... */ } }, components: { uniBadge, /* 其它组件定义 */ } } </script>
以上がユニアプリでプラグインをダウンロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。