//図のように第1の補間の効果。
結合事象は、各ページが異なるための内容は、キャンセルとOKボタンを含め、渡されました。
//以下の画像は、最初のスタイルです
//モーダルボックス命令はプラグインが必要です。詳細については、私の次を参照してください、以下のアドレスでドラッグ
<！ - コモンモードフレーム
着信使用
{
dialogtitle：「モーダルフレームのタイトル」（nullも可能）
dialogstatus：真のフレーム表示モード、偽の隠されたモードフレーム（nullも可能）
}
- >
<テンプレート>
<DIV CLASS = "DIA">
<-ダイアログ
：タイトル= "dialogtitle"
：visible.sync = "dialogstatus"
：クローズ・オンクリックモーダル=「false」に
V-EL-ドラッグ対話
@ dragDialog = "handleDrag"
：クローズ・オン・プレス・エスケープ=「false」に>
<スロット> </スロット>
</ EL-ダイアログ>
</ div>
</テンプレート>
<スクリプト>
「../../directive/el-dragDialog/index」からインポートelDragDialog
輸出のデフォルト{
//カスタム命令：ドラッグモーダルボックス
ディレクティブ：{elDragDialog}
//アレイ受信モードブロックタイトル、ステータス]
小道具：[ 'publicdialogarray']、
成分：{}、
データ（）{
{戻ります
dialogtitle：this.publicdialogarray.dialogtitle、//着信フレームモードタイトル
dialogstatus：this.publicdialogarray.dialogstatu //着信フレームモードの表示と非表示
}
}、
作成した（） {}、
方法：{
handleDrag（）{} //イベントドラッグモードフレーム
}、
見ます：{
//小道具配列の変化を聞きます
publicdialogarray：{
ハンドラ（）{
this.dialogtitle = this.publicdialogarray.dialogtitle || 「」
this.dialogstatus = this.publicdialogarray.dialogstatu || 偽
}、
即時：真、
深い：真
}
}
}
</ SCRIPT>
// divの外ダイアログに追加して、深いダイアログの追加/中/スタイルを制御することができます
//それはスコープなしで直接汚染の恐れスコープ、グローバルスタイルを追加していない場合の後にグローバルスタイルを汚染しないであろうから。あなたがすることができます！
<スタイルlangは= "少ない" スコープ>
//グローバルスタイルスタイルを指し、
@import '../../styles/index.less';
// dialog的style样式
//自定义弧度
@border-radius: 4px !important; //border弧度
.dia {
/deep/.el-dialog {
border-radius: @border-radius;
box-shadow: 0px 0px 70px #333333;
top: 15%;
min-width: 570px;
min-height: 300px;
max-width: calc(100% - 1000px);
max-height: calc(100% - 30px);
display: flex;
flex-direction: column;
justify-content: space-between;
.el-dialog__body {
overflow: auto;
}
.el-dialog__header {
border-top-left-radius: @border-radius;
border-top-right-radius: @border-radius;
background-color: @dialogbackground;
line-height: 0em !important;
padding: 15px;
.el-dialog__title {
color: #fff; //字体颜色
}
}
.dialog-footer {
.el-button:nth-child(1) {
margin-left: 33%; //确定取消按钮中间间隔
}
.el-button:nth-child(2) {
margin-left: 10%; //确定取消按钮中间间隔
margin-right: 20%;
}
}
.divone {
float: left;
padding: 0px 15px;
margin-left: 10px;
margin-top: 10px;
background-color: #eeeeee;
}
.divonebottom {
clear: both;
border-bottom: 1px solid #eee;
height: 100%;
}
.el-icon-close:before {
color: #fff; //x的颜色
font-size: 1.4em; //x的大小
text-align: center;
position: relative;
bottom: 3px;
}
.el-input-number {
width: auto !important;
}
}
}
</style>