mptosat、mpvueに基づくトーストポップアップコンポーネント

はじめに

mptoastは、mpvue githubアドレスに基づくシンプルなポップアップコンポーネントです：https : //github.com/noahlam/mpvue-toast

特徴

軽量化現在、プロジェクト全体は未打包前おそらく120行コード（コメントを含む）のみで、約5kb（アイコンを含む）です。
構成を減らす構成を減らすためにのみ、多数の最適化方法を試しました
冗長性が少ない各ページは1回だけ導入する必要があります。ページに複数のサブコンポーネントがある場合、繰り返し導入することなくページと共有できます。
簡単な使い方輸入、登録に必要な構成要素に加え、およびHTMLの導入（サポートされていないため、mpvueのこれらの厄介なものを、最適化を行うことが一時的にできない）ページのページでは、他の人がコードの1行だけ使用this.$mptoast('提示消息‘)ポップを実現することができます
強力なカスタマイズ性ユーザーにスタイル属性を書き換えて样式类名もらいます。明確に定義されたものを渡すだけで、元のスタイルをカバーできます（詳細については、パラメーターの説明を参照してください）。

インストールする

1. vuexプロジェクトが使用されていない場合は、をインストールします。mptoast依存していvuexますが、関連するvuexコードにさらされることはありませんのでご安心ください。追加vuexするコードを少なくするために追加します。

npm i vuex

2.インストールmptoast

npm i mptoast -D

または

yarn add mptoast --dev

3.プロジェクトのメイン構成ファイルに（一般位于src/main.js）次のコードを追加します

import mpvueToastRegistry from 'mptoast'
mpvueToastRegistry(Vue)

4.ポップアップする必要があるページで、コンポーネントを紹介して登録し、ページに登録したコンポーネントを追加します。これをjs this.$mptoast()で呼び出すことができます。以下は簡単な例です

<template>
  <div>
    <-- 省略其他代码 -->
    <mptoast />
  </div>
</template>

<script>
import mptoast from 'mptoast'

export default {
  components: {
    mptoast
  },
  data () {
    return {}
  },
  methods: {
    showToast () {
      this.$mptoast('我是提示信息')
    },
  }
}
</script>

なぜvueコンポーネントのようにそれを行う方法がないのかについては、いったん導入されると、すべてのページで使用できるようになります。mpvueは現在グローバルコンポーネントをサポートしていないため、以下の点について説明する必要があると思います。さまざまな回避策を試してみましたが、どれも動作しません、誰でも使用できるように、いくつかの単語を入力し、冗長性を減らし、私は多くの試みと最適化を行いました。現在、mpvueチームはすでに新しいグローバルコンポーネント関数の追加を検討しています。サポートされたら、常に注意を払います。こちらも即サポート。

パラメータの説明

パラメータには2つのタイプがあり、1つは複数のパラメータであり、もう1つは1つのオブジェクトのみを受け取ることです。

1.複数のパラメーター

パラメータの場所	パラメータのタイプ	パラメータ名	必要です	デフォルト値	その他の指示
1	ストリング	テキストを表示する	はい	-	最初のパラメーターが文字列または数値型でない場合、オブジェクトとして扱われます。これは、上記の別の状況です
2	攪拌	アイコンの種類を表示する	いいえ	-	3つのオプションの「成功」、「エラー」、「情報」
３	数	閉店時間	いいえ	1500	単位はミリ秒ミリ秒で、他の形式（非数値タイプ）はエラーを報告します
4	ストリング	文字スタイルのクラス名	いいえ	-	あなたがショーのスタイルをカスタマイズする必要がある場合は、スタイルクラスを設定してください、その後、クラス名は、このパラメータに渡された、クラス定義、このクラスを使用するすべてのページがグローバルとして定義しなければならないならば、あなたがスコープのスコープを定義した場合、その後、サブアセンブリすることはできません親コンポーネントのスタイルを再利用します。
5	ストリング	アイコンスタイルクラス名	いいえ	-	上記のように、アイコンはテキストに含まれていることに注意してください

次のコードは、複数のパラメーター呼び出しの簡単な例です

this.$mptoast('温馨提示', 'success', 2000)

第二に
、単一のオブジェクトオブジェクトオブジェクトパラメータの関数は、実際には上記多个参数の対応する関数と同じですが、記述が異なります。コードを直接調べます。

this.$mptoast({
  text: '温馨提示',        // 显示文本
  icon:'success'          // 图标类型
  duration:  2000,        // 关闭时间
  textClass: 'my-class'   // 样式类名
  iconClass: 'icon-class' // 图标类名
})

間違ったタイプが渡された場合、上記のパラメーターが最初に変換されることに注意してください。変換が失敗した場合、エラーが報告されることがあります。

はじめに

特徴

インストールする

パラメータの説明

おすすめ