<テンプレート>
<DIV CLASS = "mat_addcompt">
<-ダイアログ
：visible.sync = "可視"
：ショークローズ=「false」に
幅= "1000px"
：モーダル= "true" を
：クローズ・オンクリックモーダル=「false」に
：クローズ・オン・プレス・エスケープ=「false」に
：追加 - ボディ=「true」を
クラス=「追加」
>
<h2のスロット= "タイトル">
<テンプレート> </テンプレートを>設定を追加
</ H2>
<ボタン
タイプは、=「ボタン」
アリア・ラベル=「閉じます」
クラス= "EL-dialog__headerbtn"
@ click.stop = "cancelModal"
>
<Iクラス= "近い"> </ I>
</ button>の
<！ - 特定のコンテンツをフォーム - >
<div>
qwewr
</ div>
<DIVスロット=「フッター」クラス=「ボタンラップ」>
<EL-ボタン型= "プライマリ" @click = "">保存</ EL-ボタン>
取消</ EL-ボタン> <EL-ボタンタイプ= "主" @ = "cancelModal（）" をクリック>を
</ div>
</ EL-ダイアログ>
</ div>
</テンプレート>
<スクリプト>
"@ / API / config.jsの" からの輸入HTTPAPI。
輸出のデフォルト{
名前： "SettingComponent"、
小道具：{
可視：{タイプ：ブール値、デフォルト：false}、
}、
データ（）{
{戻ります
}。
}、
{）（マウント
}、
//前に作成します。
作成した（） {
}、
//キープアライブを追加し、<コンポーネント：ある=「コンポーネント名」> </部品>
活性化されました（）{}、
//聞きます
見ます：{
//変更は、この機能を実行します
currentRowの（）{}
}、
方法：{
cancelModal（）{
//閉じるポップアップが可視値親コンポーネントの変更をトリガ
この$（ "更新：目に見える"、false）を放出します。
}、
}
}。
</ SCRIPT>
<スタイルはLANG = 'SCSS' をスコープ>
.EL-dialog__header /深/ H2 {
マージントップ：12ピクセル;
フォント重量：太字;
}
</スタイル>
<ボタン@をクリック= "追加">新增</ボタン>
父<ImportAddComponent：visible.sync = "addIsShow"> </ ImportAddComponent>
<スクリプト>
「./BedutyImport_addcomponen」からインポートImportAddComponent。
"@ / API /設定" からインポートするAPI。
輸出のデフォルト{
名前： "BedutyDaily"、
成分：{ImportAddComponent}
データ（）{
{戻ります
addIsShow：偽、
}
}、
方法：{
{追加（）
this.addisShow =はtrue。
}
</ SCRIPT>