この会社では、プロジェクトはコードに直接英語版、つまり中国語と英語の文化を追加する必要がある。 1.まず、main.jsページを設定します'vue-i18n' から VueI18n をインポートします Vue.use(VueI18n) // プラグインとしてマウント const i18n = new VueI18n({ //locale: 'zh-CN', // 言語識別子 locale: 'Chinese', // 言語識別子 //this.$i18n.locale // ロケールメッセージの値の切り替えによる言語の切り替え: { 'Chinese': require('./common/lang/zh'), // 中国語言語パッケージ 'English': require('./common/lang/en') // 英語言語パッケージ}, //警告を非表示 silentTranslationWarn: true }) 新しいVue({ el: '#app', ルーター、 国際化、 コンポーネント: { アプリ }, テンプレート: '<App/>' }) 2. 対応するパスの下で言語パックを構成します。ここにはコードの一部のみが表示されます。必要なものだけをここに追加してください。ja.js より エクスポートconst m = { deviceCode: 'デバイス コード', //デバイス コード deviceName: 'デバイス名', //デバイス名 deviceType: 'デバイス タイプ', //デバイス タイプ denial: '拒否', //拒否 camera: 'カメラ', //カメラ} js の翻訳 エクスポートconst m = { deviceCode: 'デバイス コード', //デバイス コード deviceName: 'デバイス名', //デバイス名 deviceType: 'デバイス タイプ', //デバイス タイプ denial: '拒否', //拒否 camera: 'カメラ', //カメラ} 3. ページ上の異なる場所で使用され、書き方も若干異なります(1)プレースホルダーとボタンの書き方 <el-row :gutter="30"> <el-col :span="4"> <div class="grid-content bg-purple"> <el-input v-model="value0" :placeholder="$t('m.placeOne')"></el-input> </div> </el-col> <el-col :span="8"> <div class="grid-content bg-purple"> <el-button @click="searchData()" type="primary" icon="el-icon-search">{{ $t('m.query') }}</el-button> <el-button @click="dialogVisible = true" type="warning">{{ $t('m.AddDevice') }}</el-button> </div> </el-col> </el-row> (2) 表の書き方 <el-table :data="テーブルデータ" ストライプ スタイル="幅: 100%;"> <el-テーブル列 prop="エリア名" :label="$t('m.areaName')" 幅="100"> </el-table-column> </el-table> (3)サブコンポーネントポップアップボックスの記述方法 <el-dialog :title="$t('m.Ediedevice')" :visible.sync="dialogVisibles" width="30%" :before-close="handleClose" :close-on-click-modal=false> <edit-equipment @subsuccess="subsuccess" :editDate="editDate" style="overflow: hidden;"></edit-equipment> </el-ダイアログ> (4) js での文字列連結: strHtml = strHtml + "<td>"+this.$i18n.t('m.deviceCode')+":</td>"; 以上がVueバックグラウンド管理に多言語機能を追加する実装例の詳細です。Vueバックグラウンド管理に多言語機能を追加する詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Node.js で MySQL データベースにバッチデータを挿入する方法
>>: CentOSにPHP+Apache+MySQLのサーバー環境をインストールして構築する
チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...
もしかしたら私の考え方が間違っていたのかもしれないし、問題の説明が少し乱雑だったのかもしれないが、こ...
JS で関数を定義する 3 つの方法例を挙げて説明しましょう。 <スクリプト> //メソ...
この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを例として紹介します。...
目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...
目次1. redux とは何ですか? 2. 還元の原則3. redux の使い方は? (1)redu...
目次次のチェックミックスイン$強制更新設定、削除フィルター指令その他の単純な共通プロパティとメソッド...
Shutdown.batファイルには次の文があります "%CATALINA_HOME%&q...
テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...
目次1. イメージをプルする2. ローカルデータボリュームを作成する3. コンテナを作成する4. J...
序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...
High Performance MySQL バージョン 3 (セクション 4.1.7) を見ると、...
目次コンテナデータボリュームとはコンテナ データ ボリュームが必要なのはなぜですか?使用データボリュ...
この記事では、例を使用して、MySQL で効率的なインデックスを作成する方法について説明します。ご参...
01 ウィンターフレーク(個人のみ) 02 スノートップキャップ(業務用) 03 モディウス「フリ...