optimize Modal style

optimize Modal style
This commit is contained in:
梁灏 2016-11-08 23:46:10 +08:00
parent 3fa1c31eda
commit 09a0430201
7 changed files with 29 additions and 17 deletions
dist/styles
src
components/modal
styles
test/routers

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -8,7 +8,7 @@
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
@ -175,7 +175,7 @@
let showHead = true;
if (this.$els.head.innerHTML == '<p></p>' && !this.title) {
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
showHead = false;
}

View file

@ -46,7 +46,7 @@
}
&-close {
.content-close;
.content-close(1px, 31px);
}
&-body {
@ -57,7 +57,7 @@
&-footer {
border-top: 1px solid @border-color-split;
padding: 10px 18px 10px 10px;
padding: 12px 18px 12px 10px;
text-align: right;
button + button {
margin-left: 8px;

View file

@ -1,5 +1,5 @@
.close-base(@top: 0) {
font-size: 22px;
.close-base(@top: 0, @icon-font-size: 22px) {
font-size: @icon-font-size;
color: @legend-color;
transition: color @transition-time ease;
position: relative;

View file

@ -2,15 +2,18 @@
.content-header() {
border-bottom: 1px solid @border-color-split;
padding: 10px 16px;
padding: 14px 16px;
line-height: 1;
p {
p,
&-inner
{
display: inline-block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 14px;
font-size: @font-size-base;
color: @title-color;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
@ -18,8 +21,8 @@
}
}
.content-close(@top: 0) {
font-size: 12px;
.content-close(@top: 0, @icon-font-size: 22px) {
font-size: @font-size-small;
position: absolute;
right: 16px;
top: 8px;
@ -27,6 +30,6 @@
cursor: pointer;
.@{icon-prefix-cls}-ios-close-empty {
.close-base(@top);
.close-base(@top, @icon-font-size);
}
}

View file

@ -6,9 +6,17 @@
<i-button @click="success">成功</i-button>
<i-button @click="warning">警告</i-button>
<i-button @click="error">错误</i-button>
<i-button @click="modal1 = true"></i-button>
<Modal
:visible.sync="modal1"
title="普通的Modal对话框标题">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
</Modal>
</template>
<script>
import { Message, Button, Alert, Card, Notice, iButton } from 'iview';
import { Message, Button, Alert, Card, Notice, iButton, Modal } from 'iview';
export default {
components: {
@ -17,14 +25,15 @@
Alert,
Card,
Notice,
iButton
iButton,
Modal
},
props: {
},
data () {
return {
modal1: true
}
},
computed: {