element-ui での通知 カスタム スタイル、ボタン、クリック イベントを通知します

通知通知は、ページの隅にフローティングしてグローバル通知リマインダー メッセージを表示するために使用されます。

1. カスタム HTML ページ

        element-ui の公式ドキュメントには、Notification 通知コンポーネントのプロパティがmessage HTML フラグメントの受け渡しをサポートしていると記載されていますが、この例では単純な HTML フラグメントのみを示しており、通常は開発のより深いニーズを満たすことができません。たとえば、ボタンを追加してチェックを入れる必要があります。ボックス、特にボタンもクリック イベントにバインドされているため、サンプルの HTML フラグメントは使用できません。

        さまざまなタイプの VNode インスタンスをインスタンス化できる VNode を使用する必要があります。VNodeはJSオブジェクトであるため互換性が高く、ノードやブラウザを問わず一律に動作することができ、サーバーサイドレンダリング、ネイティブレンダリング、手書きレンダリング機能などが得られます。

//使用VNode创建一个勾选框
const checkbox = h('input', {
            attrs: {
                type: 'checkbox',
                checked: this.checked
            },
            domProps: {
                checked: this.checked
            },
            on: {
                change: (event) => {
                    this.$store.state.showWarning = event.target.checked
                }
            }
        })
        const label = h('label', {
            style:{
                margin:"10% 0 0 0 ",
            }
        }, [
            checkbox,
            `不再弹出该类型消息`
        ])
        //定义确认按钮
        const button = h('el-button', {
            props:{
                type:'primary',
                size:"mini"
            },
            on: {
            //为按钮绑定点击事件
                click: ()=>{
                    this. closeWarn(obj)
                }

            },
            style:{
                border:"none",
                textAlign:"center",
                // width:"20%",
                margin:"5% 0 0 0 ",
            }
        }, '确定')
        const br = h('br')
        //定义通知弹窗
        const notification = this.$notify({
            type:this.warnType,
            title: this.warn.msg,
            dangerouslyUseHTMLString: true,
            offset:50,
            message:h('div', {
                style:{
                    width:"100%"
                },
            }, [
                label,
                br,
                button
            ]),
            duration: 0,
            //自定义类名
             customClass:`warnNotify`,
            showClose: false,

        });

 

 2. ポップアップ ボックスを閉じるボタンをカスタマイズします。

ボタンを定義し、ボタンをクリックすることで現在のポップアップ ボックスを削除することを想定しています。

 現在の通知インスタンスを呼び出す Notification か 返します。this.$notifyインスタンスを手動で閉じる必要がある場合は、その close メソッドを呼び出すことができます。

メソッドでポップアップウィンドウを閉じる方法:

ポップアップフレームが複数ある場合、closeメソッドでOKボタンをクリックし、該当するポップアップフレームを削除する方法です。 

closeWarn(obj) { // 点击确认，关闭弹框，并且删除数组中对应的项   
    this.notifyList.forEach((item, index) => {
                  //满足以下条件时关闭弹框
                  if (item.id === obj.id && item.flag===obj.flag) {
                      item.notification.close(); // 关闭弹框
                      indices.push(index); // 存储需要删除的索引
                      // 删除对应的项
                      // indices.reverse().forEach((index) => {
                      this.notifyList.splice(index, 1);
                      this.notifyArr.splice(index,1)
                  }
              });
}

 3. 通知ボックスのスタイルをカスタマイズする

以下は、箇条書きボックスの背景の透明度を変更するための簡単な表示です。

上記では、通知ボックスに次のクラス名を付けました。 

  //自定义类名
             customClass:`warnNotify`,

 <style></style> でこのクラスのスタイルを設計し、表示したいスタイルに変更します。

.warnNotify{
    background: rgba(255, 255, 255, 0.8) !important;
}

追加されたメッセージ レイヤー div は現在のコンポーネントにも app.vue div にもなく、その div タグも同じであるため、スタイルを現在の vue コンポーネントのスコープ付き部分スタイルとして設定できないことに注意してください。レベルを app.vue として設定し、スタイルの重み付けを最高の重み付けにするには ! important を使用します!

これまでのところ、element-ui の通知は、カスタム スタイル、ボタン、および完了するクリック イベントを通知します。