要件：
イベントにマスク1. [ポップ。
キャンセルする必要があり、削除イベント2.マスク（マスクが消えたときにマスクを削除して消えて削除をクリックしながらクリックして、[キャンセル）;
空白をクリック3.マスクは姿を消しました。
<テンプレート>
<DIV CLASS = "waitPay">
<のdivクラス= "ロゴ">
<スパン> </ span>を
<スパン>ポリシー数{{accidentData.orderId}} </スパン>
<スパン@クリック= "isdele">删除</ span>の
</ div>
<DIV CLASS = "carInfo">
<のdivクラス= "テキスト">
<P> {{accidentData.orderMemberName}} </ P>
<P>保険：{{accidentData.policyHolder}} </ P>
<P>被保険者：{{accidentData.protectHolder}} </ P>
<P>
決済日：{{accidentData.orderMemberName}}
</ P>
</ div>
<のdivクラス= "項目-IMG">
<IMG：SRC = "オーダーステータス" ALT = "">
</ div>
</ div>
<のdivクラス= "アイテム">
<P>
<スパン>保费：{{accidentData.amount}} </スパン>
<スパン>促進費：271.1 </ span>の
</ P>
<p個のV-ショー= "isState">
<スパン>
再保険
</ span>の
<スパン>
支払い
</ span>の
</ P>
</ div>
<IsDeleMaskのV-ショー= "ショー" @ isShow = "isShow" />
</ div>
</テンプレート>
<スクリプト>
以下からの輸入IsDeleMask "@ /コンポーネント/ IsDeleMask.vue"; //削除
輸出のデフォルト{
小道具：[ "accidentData"]、
成分：{
IsDeleMask
}、
データ（）{
リターン{
ショー：偽、
}
}、
計算：{
注文の状況（） {
{= OBJてみましょう
"10000531"：//已出、（ "@ /資産/ IMG / yi_chu_dan.png"）が必要です单
"10000532"：必要（ "@ /資産/ IMG / daizhifu.png"）、//待支付
"10000533"：退//（ "@ /資産/ IMG / TUI-dan.jpg"）が必要です单
}。
[this.accidentData.orderStatus] OBJ返します。
}、
isState（）{
{= OBJてみましょう
「10000531」：偽は、//シングルを持っています
"10000532"：trueの場合、//単一ではありません
"10000533"：偽//チャージバック
}。
[this.accidentData.orderStatus] OBJ返します。
}
}、
方法：{
isdele（）{
this.showは真=。
}、
isShow（）{
this.showは偽=。
}
}
}。
</ SCRIPT>
<スタイルLANG = "SCSS" スコープ>
.waitPay {
幅：94.67パーセント。
最大高さ：4.6rem。
背景色：#FFF;
マージン：自動;
マージン下：0.2rem。
ボーダー：0.18rem。
> .logo {
幅：100％;
高さ：0.7rem。
//背景：緑;
表示：フレックス。
ALIGN-アイテム：センター;
border-bottom：0.012rem固体＃1 f2f2f2;
>スパン：n番目の子（1）{
色：＃f76c41。
フォント重量：太字;
フォントサイズ：0.28rem。
margin-left：8％。
}
>スパン：n番目の子（2）{
色：＃6a6a6a。
フォントサイズ：0.22rem。
margin-left：8％。
マージン右：10％;
}
>スパン：n番目の子（3）{
テキスト整列：右;
色：＃333333;
フォントサイズ：0.22rem。
フォント重量：太字;
}
}
> .CarInfo {
幅：100％;
高さ：2.32rem。
//背景：赤;
表示：フレックス。
border-bottom：0.012rem固体＃1 f2f2f2;
.text {
パディング左：0.3rem。
幅：73.33パーセント。
//背景：黄色;
高さ：2.32rem。
ボックスサイズ：ボーダーボックス;
> P {
フォントサイズ：0.26rem。
色：＃6a6a6a。
//フォント重量：太字;
行の高さ：0.46rem。
}
> P：n番目の子（1）{
パディングトップ：0.25rem。
色：＃333333;
フォントサイズ：0.3rem。
フォント重量：太字;
}
}
> .item-IMG {
幅：26.67パーセント。
表示：フレックス。
マージン下：0.61rem。
マージントップ：0.4rem。
正当化 - コンテンツ：センター;
> IMG {
幅：1.3rem。
高さ：1.3rem。
ALIGN-アイテム：センター;
}
}
}
> .item {
幅：100％;
最大高さ：1.58rem。
//背景：緑;
> P：n番目の子（1）{
幅：100％;
高さ：0.69rem。
表示：フレックス。
正当化 - コンテンツ：スペースの間;
ALIGN-アイテム：センター;
>スパン{
フォントサイズ：0.24rem。
色：＃f76c41。
フォント重量：太字;
}
>スパン：n番目の子（1）{
パディング左：0.3rem。
}
>スパン：n番目の子（2）{
パディング右：0.3rem。
}
}
> P：n番目の子（2）{
幅：100％;
高さ：0.89rem。
>スパン{
幅：2rem。
高さ：0.7rem。
表示：インラインブロック。
テキスト整列：センター;
行の高さ：0.7rem。
フォントサイズ：0.26rem。
}
>スパン：n番目の子（1）{
ボーダー：0.012rem固体＃1 6a6a6a。
色：＃6a6a6a。
margin-left：30.9パーセント。
マージン右：6.5％;
}
>スパン：n番目の子（2）{
背景色：＃f76c41。
色：白;
}
}
}
}
</スタイル>
<テンプレート>
<DIV CLASS = "isDeleは、" @ = "kbxs" をクリックしてください>
<のdivクラス= "アイテム">
<P>削除</ P>
<P>
<スパン>
キャンセル
</ span>の
<スパン>
[削除]
</ span>の
</ P>
</ div>
</ div>
</テンプレート>
<スクリプト>
輸出のデフォルト{
データ（）{
リターン{
deleData： ""
}。
}、
方法：{
kbxs（E）{
IF（e.target.tagName === 'DIV'）{
これ。EMITを$（ 'isShow'）
}そうであれば（e.target.tagName === 'SPAN'）{
（e.target.innerHTML.indexOf（ '取消'）！== -1）の場合{
this.handleClick（ 'キャンセル'）
}他{
this.handleClick（ '削除'）
}
}
}、
handleClick（タイプ）{
IF（タイプ== '取消'）{
これ。EMITを$（ 'isShow'）
リターン
}
{=件のデータにしましょう
//注文ID： 'OPRO20180823160539323'
}。
この。$ http.get（ "delect"、DATAS）.then（（{データ}）=> {
IF（data.code == 1）{
dialog.toastこれ。$（{
MES：data.msg、
タイムアウト：1500、
アイコン：「成功」、
コールバック：（）=> {
これ。EMITを$（ 'isShow'）
}
}）;
}
}）;
}
}
}。
</ SCRIPT>
<スタイルLANG = "SCSS" スコープ>
{.isDele
位置：固定;
トップ：0;
左：0;
幅：100％;
高さ：100％;
背景：RGBA（0、0、0、0.7）。
表示：フレックス。
正当化 - コンテンツ：センター;
ALIGN-アイテム：センター;
Zインデックス：100;
> .item {
幅：6.3rem。
高さ：3rem。
背景：#FFF;
国境半径：0.1rem。
> P：n番目の子（1）{
高さ：2.05rem。
色：＃333333;
フォントサイズ：0.38rem。
フォント重量：太字;
テキスト整列：センター;
行の高さ：2.05rem。
Zインデックス：200;
}
> P：n番目の子（2）{
幅：100％;
高さ：0.95rem。
//背景：緑;
>スパン{
色：＃6a6a6a。
表示：インラインブロック。
幅：50％;
フォントサイズ：0.28rem。
テキスト整列：センター;
行の高さ：0.95rem。
}
>スパン：n番目の子（2）{
色：#FFF;
背景色：＃f76c41。
行の高さ：0.97rem。
境界半径：0 0 0 0.1rem。
}
}
}
フォントサイズ：0.3rem。
色：緑;
}
</スタイル>