//도 마찬가지로 제 보간 효과.
결합 이벤트는 각 페이지가 다르므로의 내용은 소거 및 OK 버튼을 포함하여 전달 하였다.
// 다음 그림은 초기 스타일이다
// 드래그 모달 상자 지침 플러그인이 필요합니다. 자세한 내용은 내 다음을 참조하십시오 다음은 주소입니다
<! - 공통 모드 프레임
수신 사용
{
DIALOGTITLE '모달 프레임 제목'(null도 가능)
dialogstatus : 진정한 프레임 표시 모드, 거짓 숨겨진 모드 프레임 (null도 가능)
}
->
<템플릿>
<DIV 클래스 = "디아">
<더 - 대화
: 제목 = "DIALOGTITLE"
: visible.sync = "dialogstatus"
: 근접에 클릭 모달 = "거짓"
V-엘 드래그 대화
@ dragDialog = "handleDrag"
: 근접 온 프레스 탈출 = "거짓">
<슬롯> </ 슬롯>
</ 엘 - 대화>
</ DIV>
</ 서식>
<script>
에서 가져 오기 elDragDialog '../../directive/el-dragDialog/index'
수출 기본 {
// 사용자 지침 : 드래그 모달 상자
지침 : {elDragDialog}
// 어레이 수신 모드 블록 [제목 상태]
소품 : 'publicdialogarray'],
구성 요소 : {}
데이터 () {
{반환
DIALOGTITLE : this.publicdialogarray.dialogtitle, // 수신 프레임 모드 제목
dialogstatus : this.publicdialogarray.dialogstatu // 수신 프레임 모드가 표시 및 숨기기
}
},
만들어진() {},
방법 : {
handleDrag () {} // 이벤트 드래그 모드 프레임
},
손목 시계: {
// 소품 배열 변화를 듣기
publicdialogarray : {
핸들러 () {
this.dialogtitle = this.publicdialogarray.dialogtitle || ''
this.dialogstatus = this.publicdialogarray.dialogstatu || 그릇된
},
즉시 : 사실,
깊은 : 사실
}
}
}
</ script>
// / 깊은 대화 상자 추가에 다음 사업부 외부의 대화에 추가 / 스타일을 제어 할 수 있습니다
//이 범위 추가 한 후 전역 스타일을 오염시키지 않기 때문에, 전역 스타일을 직접 범위. 당신은 할 수없이 오염 두려워하지 않는 경우!
<스타일 랭 = "덜"범위>
// 글로벌 스타일 스타일을 말한다
@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>