commit
14ad333882
4 changed files with 32 additions and 26 deletions
|
@ -34,7 +34,7 @@
|
||||||
const iconPrefixCls = 'ivu-icon';
|
const iconPrefixCls = 'ivu-icon';
|
||||||
|
|
||||||
function isValueNumber (value) {
|
function isValueNumber (value) {
|
||||||
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)/).test(value + '');
|
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');
|
||||||
}
|
}
|
||||||
function addNum (num1, num2) {
|
function addNum (num1, num2) {
|
||||||
let sq1, sq2, m;
|
let sq1, sq2, m;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="wrapClasses">
|
|
||||||
<div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
|
<div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
|
||||||
|
<div :class="wrapClasses" @click="handleWrapClick">
|
||||||
<div :class="classes" :style="styles" v-show="visible" transition="ease">
|
<div :class="classes" :style="styles" v-show="visible" transition="ease">
|
||||||
<div :class="[prefixCls + '-content']">
|
<div :class="[prefixCls + '-content']">
|
||||||
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
|
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
|
||||||
|
@ -130,6 +130,10 @@
|
||||||
this.close();
|
this.close();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
handleWrapClick (event) {
|
||||||
|
// use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
|
||||||
|
if (event.target.getAttribute('class').indexOf(`${prefixCls}-wrap`) > -1) this.mask();
|
||||||
|
},
|
||||||
cancel () {
|
cancel () {
|
||||||
this.close();
|
this.close();
|
||||||
},
|
},
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: rgba(55, 55, 55, 0.6);
|
background-color: rgba(55, 55, 55, 0.6);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
z-index: @zindex-modal;
|
||||||
|
|
||||||
&-hidden {
|
&-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -1,39 +1,40 @@
|
||||||
<style>
|
<style lang="less">
|
||||||
body{
|
.vertical-center-modal{
|
||||||
height: 2000px !important;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.ivu-modal{
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<i-button type="primary" @click="modal1 = true">显示对话框</i-button>
|
<i-button @click="modal9 = true">距离顶部 20px</i-button>
|
||||||
<i-button @click="scrollable = !scrollable">Toggle scrollable</i-button>
|
|
||||||
scrollable:{{scrollable}}
|
|
||||||
<Modal
|
<Modal
|
||||||
:visible.sync="modal1"
|
title="对话框标题"
|
||||||
title="普通的Modal对话框标题"
|
:visible.sync="modal9"
|
||||||
:scrollable="scrollable"
|
:style="{top: '20px'}">
|
||||||
@on-ok="ok"
|
<p>对话框内容</p>
|
||||||
@on-cancel="cancel">
|
<p>对话框内容</p>
|
||||||
|
<p>对话框内容</p>
|
||||||
|
</Modal>
|
||||||
|
<i-button @click="modal10 = true">垂直居中</i-button>
|
||||||
|
<Modal
|
||||||
|
title="对话框标题"
|
||||||
|
:visible.sync="modal10"
|
||||||
|
class-name="vertical-center-modal">
|
||||||
<p>对话框内容</p>
|
<p>对话框内容</p>
|
||||||
<p>对话框内容</p>
|
<p>对话框内容</p>
|
||||||
<p>对话框内容</p>
|
<p>对话框内容</p>
|
||||||
<i-button @click="scrollable = !scrollable">Toggle scrollable</i-button>
|
|
||||||
</Modal>
|
</Modal>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
modal1: false,
|
modal9: false,
|
||||||
scrollable: false
|
modal10: false,
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
ok () {
|
|
||||||
this.$nextTick(() => this.modal1 = true);
|
|
||||||
this.$Message.info('点击了确定');
|
|
||||||
},
|
|
||||||
cancel () {
|
|
||||||
this.$Message.info('点击了取消');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue