Vueはソースコード付きのリファレンスライブラリのメソッドを使用します

Vueはソースコード付きのリファレンスライブラリのメソッドを使用します

monaco-editor-vueの公式ソースコードは次のとおりです。

インデックス

'monaco-editor/esm/vs/editor/editor.api' から * を monaco としてインポートします。

関数noop() { }

エクスポート { モナコ };

エクスポートデフォルト{
  名前: 'MonacoEditor'、
  小道具: {
    diffEditor: { type: Boolean, default: false }, // diff モードを使用するかどうか width: { type: [String, Number], default: '100%' },
    高さ: {タイプ: [文字列、数値]、デフォルト: '100%'},
    オリジナル: 文字列, // 差分モードでのみ有効 値: 文字列,
    言語: {タイプ: 文字列、デフォルト: 'javascript'},
    テーマ: {タイプ: 文字列、デフォルト: 'vs'},
    オプション: {type: Object, default() {return {};}},
    editorMounted: {タイプ: Function、デフォルト: noop},
    editorBeforeMount: {タイプ: 関数、デフォルト: noop}
  },

  時計:
    オプション:
      深い:本当、
      ハンドラ(オプション) {
        this.editor && this.editor.updateOptions(オプション);
      }
    },

    価値() {
      this.editor && this.value !== this._getValue() && this._setValue(this.value);
    },

    言語() {
      if(!this.editor) 戻り値:
      if(this.diffEditor){ // diffモードで言語を更新
        const { オリジナル、変更済み } = this.editor.getModel();
        monaco.editor.setModelLanguage(オリジナル、this.language);
        monaco.editor.setModelLanguage(変更済み、this.language);
      }それ以外
        モデル言語を設定します。
    },

    テーマ() {
      this.editor && monaco.editor.setTheme(this.theme);
    },

    スタイル() {
      this.editor && this.$nextTick(() => {
        エディタのレイアウトをカスタマイズします。
      });
    }
  },

  計算: {
    スタイル() {
      戻る {
        幅: !/^\d+$/.test(this.width) ? this.width: `${this.width}px`,
        高さ: !/^\d+$/.test(this.height) ? this.height: `${this.height}px`
      }
    }
  },

  マウントされた(){
    これは、Monaco を初期化します。
  },

  破棄する前に() {
    this.editor と this.editor.dispose();
  },

  レンダリング (h) {
    戻る (
      <div class="monaco_editor_container" style={this.style}></div>
    );
  },

  メソッド: {
    initMonaco() {
      const { 値、言語、テーマ、オプション } = this;
      Object.assign(options, this._editorBeforeMount()); //エディターの初期化前 this.editor = monaco.editor[this.diffEditor ? 'createDiffEditor' : 'create'](this.$el, {
        値: 値、
        言語: 言語、
        テーマ: テーマ、
        ...オプション
      });
      this.diffEditor && this._setModel(this.value, this.original);
      this._editorMounted(this.editor); //エディターが初期化された後},

    _getEditor() {
      if(!this.editor) は null を返します。
      this.diffEditor を返します。this.editor.modifiedEditor : this.editor;
    },

    _setModel(value, original) { //diffモードでモデルを設定する
      const { 言語 } = this;
      元のモデルを monaco.editor.createModel(元のモデル、言語);
      定数 modifiedModel = monaco.editor.createModel(値、言語);
      this.editor.setModel({
        オリジナル: オリジナルモデル、
        変更: modifiedModel
      });
    },

    _setValue(値) {
      エディターを this._getEditor() にします。
      if(editor) は editor.setValue(value) を返します。
    },

    _getValue() {
      エディターを this._getEditor() にします。
      if(!editor) '' を返します。
      editor.getValue() を返します。
    },

    _editorBeforeMount() {
      const オプション = this.editorBeforeMount(monaco);
      オプションを返します || {};
    },

    _editorMounted(エディター) {
      this.editorMounted(エディター、モナコ);
      if(this.diffEditor){
        editor.onDidUpdateDiff((イベント) => {
          定数値 = this._getValue();
          this._emitChange(値、イベント);
        });
      }それ以外{
        editor.onDidChangeModelContent(イベント => {
          定数値 = this._getValue();
          this._emitChange(値、イベント);
        });
      }
    },

    _emitChange(値、イベント) {
      this.$emit('change', 値, イベント);
      this.$emit('入力', 値);
    }
  }
}

Vue を使用する場合、上記ライブラリの_getValueメソッドをどのように使用すればよいでしょうか?

ref = "" を定義し、 this.$refs.exampleEditor._setValue('')を使用します。

次のコードを参照してください

テスト

<テンプレート>
  <div>
    <MonacoEditor ref="exampleEditor" width="100%" height="300" theme="vs-dark" language="javascript" :options="options" @change="codeInput" />
  </div>
</テンプレート>
<スクリプト>
'monaco-editor-vue' から MonacoEditor をインポートします。
エクスポートデフォルト{
  コンポーネント:
    モナコ編集者
  },
  データ() {
    戻る {
    }
  },
  作成前() {
  },

  マウント() {
  },
  メソッド: {
    this.$refs.exampleEditor._setValue('')
  }
}

これで、ソースコード付きのリファレンスライブラリのメソッドを使用した vue に関するこの記事は終了です。リファレンスライブラリを使用した vue の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue でフォントを変更し、オンライン フォント ライブラリを参照せずにローカルにフォントを保存する方法
  • vue2.0 で element-ui コンポーネント ライブラリを参照する方法

<<:  Redmine の Docker インストール手順

>>:  DQL コマンドを使用して MySQL でデータをクエリする方法

推薦する

Apache ストレステストツールのインストールと使用

1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...

Linux で毎日データベースの自動バックアップを設定する方法

この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...

JavaScript シングルスレッドと非同期の詳細

目次1. タスクキュー2. 混乱を招く問題を説明する1. setTimeout(f1,0)とは何です...

MySQL の 4 つのトランザクション分離レベルを例を使って分析する

序文データベース操作では、同時データ読み取りの正確性を効果的に保証するために、トランザクション分離レ...

MySQL 5.7.18 Green Edition のダウンロードとインストールのチュートリアル

この記事では、MySQL 5.7.18のグリーンバージョンをダウンロードしてインストールする詳細な手...

MySQLでクエリキャッシュを実行する方法と失敗を解決する方法

関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...

Vue の高度な構築プロパティの詳細な説明

目次1. ディレクティブカスタムディレクティブ2. ミックスイン3. 継承を拡張する4. 提供して注...

Vueは小さなメモ帳機能を実装しました

この記事の例では、メモ帳の小さな機能を実現するためのvueの具体的なコードを参考までに共有しています...

Vite と Vue CLI の長所と短所

Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 1...

Canonical が Flutter で Linux デスクトップ アプリを有効化 (推奨)

Google の Flutter の目標は、どのプラットフォームを使用していても、ネイティブの速度...

MySQL マスタースレーブレプリケーション 読み書き分離の設定方法の詳細説明

1. 説明前回は、MySQL のインストールと構成、MySQL ステートメントの使用、MySQL デ...

CSS子要素選択親要素の実装

通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親...

mysql5.6 マスタースレーブ設定と非同期の問題の詳細な説明

目次1. MySQL マスタースレーブレプリケーションの原理2. MySQLのコンパイルとインストー...

HTML の基礎: HTML コンテンツの詳細

まずは本体から始めましょう:ウェブページを閲覧するとき、最初に目に留まるのは通常、ページの背景です。...