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 でデータをクエリする方法

推薦する

Nginx における 2 つの現在の制限方法についての簡単な説明

負荷は通常、システム設計時に予測されます。システムがパブリック ネットワークに公開されている場合、悪...

CocosCreator スケルトンアニメーション ドラゴンボーン

CocosCreator バージョン 2.3.4ドラゴンボーンアニメーションキールアニメーションを ...

MySQL 最適化のケーススタディ

1. 背景Youzan の各 OLTP データベース インスタンスには、実行時間が特定のしきい値を超...

ドラッグ位置プレビューを実装するネイティブJS

この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりで...

スタイリッシュなウェブページデザインを作成する方法(グラフィックチュートリアル)

「壮大」という言葉は、おそらく現代のデザイナーが最も聞きたくない言葉でしょう。デザイナー:「デザイン...

表の境界線の CSS 構文

<br />表の境界線の CSS 構文具体的な内容には、上境界線の幅、右境界線の幅、下境...

MySQL アカウント情報をエレガントにバックアップする方法

序文:最近、インスタンスの移行の問題に遭遇しました。データの移行後、データベースのユーザーと権限も移...

VueとFlask間の通信の実装

axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...

JS ES の新機能、変数分離割り当て

目次1. 配列の分離割り当て1.1 配列分離割り当てとは何ですか? 1.2 配列分離割り当てに失敗し...

MySQLでよく使われる文字列関数トップ10の詳細な説明

こんにちは、みんな!技術の話ばかりで髪は切らないトニーです。データベース関数は、何らかの機能を持ち、...

HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...

MySQLのどのフィールドがインデックスに適しているかについての簡単な説明

目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...

MySQLでレコードを変更する場合、更新操作フィールド = フィールド + 文字列

シナリオによっては、varchar 型のフィールドを変更する必要があり、変更の結果は 2 つのフィー...