|
|
@@ -1,11 +1,25 @@
|
|
|
<template>
|
|
|
- <div v-show="show" :transition="transition">
|
|
|
- <div class="modal" @click.self="clickMask">
|
|
|
- <div class="modal-dialog" :class="modalClass" name="dialog">
|
|
|
+ <div
|
|
|
+ v-show="show"
|
|
|
+ :transition="transition"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="modal"
|
|
|
+ @click.self="clickMask"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="modal-dialog"
|
|
|
+ :class="modalClass"
|
|
|
+ name="dialog"
|
|
|
+ >
|
|
|
<div class="modal-content">
|
|
|
<!--Header-->
|
|
|
<div class="modal-header">
|
|
|
- <a type="button" class="close" @click="cancel">x</a>
|
|
|
+ <a
|
|
|
+ type="button"
|
|
|
+ class="close"
|
|
|
+ @click="cancel"
|
|
|
+ >x</a>
|
|
|
<h4 class="modal-title">
|
|
|
<slot name="header">
|
|
|
{{ title }}
|
|
|
@@ -18,8 +32,22 @@
|
|
|
</div>
|
|
|
<!--Footer-->
|
|
|
<div class="modal-footer">
|
|
|
- <button v-if="showCanelButton" type="button" class="btn btn-info" @click="cancel">{{ cancelText }}</button>
|
|
|
- <button v-if="showOkButton" type="button" class="btn btn-primary" @click="ok">{{ okText }}</button>
|
|
|
+ <button
|
|
|
+ v-if="showCanelButton"
|
|
|
+ type="button"
|
|
|
+ class="btn btn-info"
|
|
|
+ @click="cancel"
|
|
|
+ >
|
|
|
+ {{ cancelText }}
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ v-if="showOkButton"
|
|
|
+ type="button"
|
|
|
+ class="btn btn-primary"
|
|
|
+ @click="ok"
|
|
|
+ >
|
|
|
+ {{ okText }}
|
|
|
+ </button>
|
|
|
<slot name="footer" />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -35,7 +63,7 @@ var ModalFix = require('./ModalFix.js').default;
|
|
|
|
|
|
export default {
|
|
|
// eslint-disable-next-line
|
|
|
- name: 'Modal',
|
|
|
+ name: 'Modal',
|
|
|
props: {
|
|
|
title: {
|
|
|
type: String,
|
|
|
@@ -77,20 +105,20 @@ export default {
|
|
|
|
|
|
emits: ['ok', 'cancel', 'close'],
|
|
|
|
|
|
- data: function(){
|
|
|
+ data: function () {
|
|
|
return {
|
|
|
show: false,
|
|
|
okText: '确定',
|
|
|
cancelText: '取消',
|
|
|
closeText: '关闭',
|
|
|
- okClass : '',
|
|
|
- cancelClass : '',
|
|
|
+ okClass: '',
|
|
|
+ cancelClass: '',
|
|
|
closeClass: '',
|
|
|
};
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
- modalClass : function() {
|
|
|
+ modalClass: function () {
|
|
|
return {
|
|
|
'modal-lg': this.large || this.large == 'true',
|
|
|
'modal-sm': this.small || this.small == 'true',
|
|
|
@@ -99,76 +127,76 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
- show : function (value) {
|
|
|
+ show: function (value) {
|
|
|
console.log('modal watch show = ' + value);
|
|
|
// 在显示时去掉body滚动条,防止出现双滚动条
|
|
|
if (value) {
|
|
|
- if(document.body.className.indexOf('modal-open') < 0){
|
|
|
+ if (document.body.className.indexOf('modal-open') < 0) {
|
|
|
document.body.className += ' modal-open';
|
|
|
}
|
|
|
} else {
|
|
|
- this.$nextTick(function(){
|
|
|
+ this.$nextTick(function () {
|
|
|
ModalFix.fix();
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
- created: function() {
|
|
|
+
|
|
|
+ created: function () {
|
|
|
if (this.show) {
|
|
|
- if(document.body.className.indexOf('modal-open') < 0){
|
|
|
+ if (document.body.className.indexOf('modal-open') < 0) {
|
|
|
document.body.className += ' modal-open';
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
|
|
|
methods: {
|
|
|
- ok: function() {
|
|
|
+ ok: function () {
|
|
|
this.$emit('ok');
|
|
|
this.show = false;
|
|
|
- this.$nextTick(function(){
|
|
|
+ this.$nextTick(function () {
|
|
|
ModalFix.fix();
|
|
|
- });
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
cancel: function () {
|
|
|
this.$emit('cancel');
|
|
|
this.show = false;
|
|
|
- this.$nextTick(function(){
|
|
|
+ this.$nextTick(function () {
|
|
|
ModalFix.fix();
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- close: function() {
|
|
|
+ close: function () {
|
|
|
this.$emit('close');
|
|
|
this.show = false;
|
|
|
- this.$nextTick(function(){
|
|
|
+ this.$nextTick(function () {
|
|
|
ModalFix.fix();
|
|
|
- });
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 点击遮罩层
|
|
|
clickMask: function () {
|
|
|
if (!this.force) {
|
|
|
this.cancel();
|
|
|
- this.$nextTick(function(){
|
|
|
+ this.$nextTick(function () {
|
|
|
ModalFix.fix();
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
- * 显示
|
|
|
- */
|
|
|
- showModal: function(){
|
|
|
+ * 显示
|
|
|
+ */
|
|
|
+ showModal: function () {
|
|
|
this.show = true;
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
- * 隐藏
|
|
|
- */
|
|
|
- hideModal: function(){
|
|
|
+ * 隐藏
|
|
|
+ */
|
|
|
+ hideModal: function () {
|
|
|
this.show = false;
|
|
|
},
|
|
|
},
|
|
|
@@ -177,37 +205,40 @@ export default {
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
- .modal {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .modal-transition {
|
|
|
- transition: all .6s ease;
|
|
|
- }
|
|
|
- .modal-leave {
|
|
|
- /* 样式没什么用,但可以让根标签的transitionEnd生效,以去掉modal-leave */
|
|
|
- border-radius: 1px !important;
|
|
|
- }
|
|
|
- .modal-transition .modal-dialog, .modal-transition .modal-backdrop {
|
|
|
- transition: all .5s ease;
|
|
|
- }
|
|
|
- .modal-enter .modal-dialog, .modal-leave .modal-dialog {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(-30%);
|
|
|
- }
|
|
|
-
|
|
|
- .modal-enter .modal-backdrop, .modal-leave .modal-backdrop {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .modal-full{
|
|
|
- width: 95%;
|
|
|
- }
|
|
|
-
|
|
|
- .modal-lg{
|
|
|
- width: 75%;
|
|
|
- }
|
|
|
-
|
|
|
- .modal-sm{
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
+.modal {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.modal-transition {
|
|
|
+ transition: all 0.6s ease;
|
|
|
+}
|
|
|
+.modal-leave {
|
|
|
+ /* 样式没什么用,但可以让根标签的transitionEnd生效,以去掉modal-leave */
|
|
|
+ border-radius: 1px !important;
|
|
|
+}
|
|
|
+.modal-transition .modal-dialog,
|
|
|
+.modal-transition .modal-backdrop {
|
|
|
+ transition: all 0.5s ease;
|
|
|
+}
|
|
|
+.modal-enter .modal-dialog,
|
|
|
+.modal-leave .modal-dialog {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-30%);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-enter .modal-backdrop,
|
|
|
+.modal-leave .modal-backdrop {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-full {
|
|
|
+ width: 95%;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-lg {
|
|
|
+ width: 75%;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-sm {
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
</style>
|