uniappシンプルなポップカスタムアセンブリ

混合アンドロイドの前に書かれたが、蓄積された全ての時間、多くのことを学んではない、後者は徐々に記録されます。

久しぶりの最近の記録、新しいuniappプロジェクトので。最近、これを行うには。

私は（簡易版）のセット全体を持っている、のような知恵上に構築されたポップ・グループを読みます

今日では、関心ダイハツ実際に布プラグ：http://ext.dcloud.net.cn/plugin?id=672

非常に単純なコンポーネントベースは、我々はそれを見てみましょう

まず、レイアウトを書きます

テキストコンテナの大きな絵

< ビュークラス= "コンテンツ" > 
        < ビューV-ショー= "isshow" ：スタイル= "{背景：色}" V-バインド：クラス= "[activeClass、アニメーター]" > 
            < ビュークラス= "PIC" > < 画像クラス= "アイコン" モード= "aspectFit" ：SRC = "アイコン" > </ 画像> </ ビュー> 
            < テキストクラス= "テキスト" ：スタイル= "{色：colortext}" >{{内容}} </ テキスト> 
        </ ビュー>
    </ ビュー>

CSSないTieshanglaiは、めまいを参照してください。あなたは見てダウンロードすることができます。

二、JS

爆弾のウィンドウの種類を決定するために使用される、いくつかのプロパティを定義し、どのようなコンテンツの一部を表示します

輸出のデフォルト{
        データ（）{
            リターン{
                アイコン： ''、// アイコンの 
                内容： ''、// コンテンツ 
                の色： ''、// 背景色 
                colorText： ''、// テキストの色 
                coloricon： ''、// アイコンの色の 
                isshow：偽、// か表示 
                activeClass： 'mpopup'、// クラスの 
                アニメーター： 'fade_Down' // アニメーションクラス
            };
        }、
        // プロパティの
        小道具：{
             // ポップのどのような種類
            のタイプ：{
                タイプ：文字列、
                値：「成功」
            }、
            // コンテンツポップ
            スパン：{
                タイプ：文字列、
                値：「これはトーストです」
            }、
            // 表示するかどうか
            のショーを：{
                タイプ：文字列、
                値：「」
            }
        }、
        計算：{
            newshow（）{
                戻る この.SHOWを。
            }
        }、
        見ます：{
            // 入ってくる値の特性の監視変化
            newshow（ヴァル）{
                 IF（ '本当の'ヴァル== ）{
                     この .Open（）; // POPを表示 
                } 他{
                     この .close（）; //はポップを隠し
                }
            }
        }、
        onLoad（）{}、
        方法：{
            INIT：関数（）{
                 この .content = この.span。
                // 成功类型
                場合（これは == '成功'を.types ）{
                     この .icon = '../../static/images/success.png' 。
                    この .color = '＃のF0F9EB' ;
                    この .colortext = '＃の67C23A' ;
                    この .coloricon = '＃の67C23A' ;
                }
                // 警告类型
                場合（これは .types == '警告' ）{
                     この .icon = '../../static/images/warn.png' 。
                    この .color = '＃FDF6EC' ;
                    この .colortext = '＃のE6A23C' ;
                    この .coloricon = '＃のE6A23C' ;
                }
                // 信息类型
                場合（これは == '情報を' .types ）{
                     この .icon = '../../static/images/info.png' 。
                    この .color = '＃のEDF2FC' ;
                    この .colortext = '＃909399' ;
                    この .coloricon = '＃909399' ;
                }
                // 错误类型
                場合（これは == 'ERR'を.types ）{
                     この .icon = '../../static/images/err.png' 。
                    この .color = '＃のFEF0F0' ;
                    この .colortext = '＃のF56C6C' ;
                    この .coloricon = '＃のF56C6C' ;
                }
            }、
            オープン：関数（）{
                 この .animator = 'fade_Down'。// 进入动画
                この.INIT（）;
                この .isshow = 真;
            }、
            クローズ：関数（）{
                 この .animator = 'fade_Top'; // 終了アニメーション
            
            }
        }
    }

さて、使用する方法を見てみましょう

第三に、使用

インタフェースまたは部品のグローバルな導入を使用する必要性を導入することができます

我々がコントロールするのJSを使用する必要がある3つの属性がありますが、それぞれの割り当ては複雑すぎます

だから私はこの方法を書いて、各呼び出しは次のようです

輸出デフォルト{
     / *
    *を設定ポップアップボックス 
    *タイプ：タイプスパン：コンテンツ秒：数秒の消失
    * / 
    setPopup：機能（_this、種類、スパン、秒）{
         場合（！_this.ispop = "真" ）{
            _this.types = 種類;
            _this.span = スパン。
            _this.ispop = "true"を。
            setTimeout（（） => {
                _this.ispop = "false"に。
            }、秒）
        }
    }
}

導入ちょうど2つのjs

'@ /静的/のJS / popup.js' からインポートするポップアップ。

「../../components/popup/popup.vue」からインポートmpopup。

輸出のデフォルト{
    データ（）{
        リターン{
            ispop：「」、// ポップ表示するかどうか 
            の種類：「ERR」// ポップタイプの 
            スパン：「これはトースト、」ある// ポップコンテンツ 
            poptime：2000
        }。
    }、
    成分：{
        mpopup
    }、
    onLoad（）{}、
    方法：{
        ポップ：関数（）{
            Popup.setPopup（この、 "成功"、 "ハロー、哈喽"、この.poptime）。
        }、
        POPP：関数（）{
            Popup.setPopup（この、 "ERR"、 "こんにちは、哈喽"、この.poptime）。
        }、
        poppp：関数（）{
            Popup.setPopup（これは、 "警告"、 "こんにちは、哈喽"、この.poptime）。
        }、
        popppp：関数（）{
            Popup.setPopup（この、 "情報"、 "ハロー、哈喽"、この.poptime）。
        }
    }
}。

 レイアウト：

    < ビュー> 
        < ビュークラス= "BTN" > 
            < ボタン@click = "ポップ（）" >成功</ ボタン> 
            < ボタン@click = "POPP（）" >失败</ ボタン> 
            < ボタン@click = "poppp （）」>警告</ ボタン> 
            < ボタン@click = "popppp（）" >信息</ ボタン> 
        </ ビュー> 
        <mpopup ：ショー= "ispop"：タイプ= "種類" ：スパン= "スパン" > </ mpopup >     
    </ ビュー>

このOK

当時アイデアは来コンポーネントをリスニングにプロパティ値を変更するために変更を加え、ボールウィンドウを制御するためのプロパティを使用することです。

クラスでは入口と出口アニメーションポップアップを制御します

githubの住所：https://github.com/steffenx/uniapp_popup