drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update $Modal style

Browse source
This commit is contained in:
梁灏 2018-06-27 09:40:31 +08:00
parent 9edded4931
commit f4273043c2
3 changed files with 70 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
examples/routers/modal.vue
View file

@ -1,47 +1,43 @@
<template>
<div>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Button type="primary" @click="modal2 = true">Display dialog box</Button>
<Button @click="hc">Click Me</Button>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
dragable
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
</Modal>
<Modal
v-model="modal2"
title="Common Modal dialog box title2"
dragable
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
</Modal>
<Button @click="instance('info')">Info</Button>
<Button @click="instance('success')">Success</Button>
<Button @click="instance('warning')">Warning</Button>
<Button @click="instance('error')">Error</Button>
</div>
</template>
<script>
export default {
data () {
return {
modal1: false,
modal2: false
}
},
methods: {
ok () {
this.$Message.info('Clicked ok');
},
cancel () {
this.$Message.info('Clicked cancel');
},
hc () {
this.$Message.info('Hello');
instance (type) {
const title = '对话框的标题';
const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
switch (type) {
case 'info':
this.$Modal.info({
title: title,
content: content
});
break;
case 'success':
this.$Modal.success({
title: title,
content: content
});
break;
case 'warning':
this.$Modal.warning({
title: title,
content: content
});
break;
case 'error':
this.$Modal.error({
title: title,
content: content
});
break;
}
}
}
}

18
src/components/modal/confirm.js
View file

@ -63,13 +63,6 @@ Modal.newInstance = properties => {
class: `${prefixCls}-body`
}
}, [
h('div', {
class: this.iconTypeCls
}, [
h('i', {
class: this.iconNameCls
})
]),
h('div', {
domProps: {
innerHTML: this.body
@ -103,6 +96,13 @@ Modal.newInstance = properties => {
class: `${prefixCls}-head`
}
}, [
h('div', {
class: this.iconTypeCls
}, [
h('i', {
class: this.iconNameCls
})
]),
h('div', {
attrs: {
class: `${prefixCls}-head-title`
@ -124,8 +124,8 @@ Modal.newInstance = properties => {
computed: {
iconTypeCls () {
return [
`${prefixCls}-body-icon`,
`${prefixCls}-body-icon-${this.iconType}`
`${prefixCls}-head-icon`,
`${prefixCls}-head-icon-${this.iconType}`
];
},
iconNameCls () {

55
src/styles/components/modal.less
View file

@ -138,33 +138,13 @@
.@{confirm-prefix-cls} {
padding: 0 4px;
&-head {
&-title {
display: inline-block;
font-size: @font-size-base;
color: @title-color;
font-weight: 700;
}
}
&-body{
margin-top: 6px;
padding-left: 48px;
padding-top: 18px;
font-size: @font-size-small;
color: @text-color;
position: relative;
&-render{
margin: 0;
padding: 0;
}
padding: 0 12px 0 0;
&-icon {
font-size: 36px;
position: absolute;
top: 0;
left: 0;
display: inline-block;
font-size: 28px;
vertical-align: middle;
position: relative;
top: 3px;
&-info {
color: @primary-color;
@ -182,10 +162,31 @@
color: @warning-color;
}
}
&-title {
display: inline-block;
vertical-align: middle;
margin-left: 12px;
font-size: @font-size-large;
color: @title-color;
font-weight: 700;
}
}
&-body{
padding-left: 42px;
font-size: @font-size-base;
color: @text-color;
position: relative;
&-render{
margin: 0;
padding: 0;
}
}
&-footer{
margin-top: 40px;
margin-top: 20px;
text-align: right;
button + button {