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

update Modal、Poptip

Browse source 
update Modal、Poptip
This commit is contained in:
梁灏 2016-11-21 11:38:49 +08:00
parent 71d9fc8e45
commit 669937325b
8 changed files with 66 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,14 +19,14 @@ Modal.newInstance = properties => {
<Modal${props} :visible.sync="visible" :width="width">
<div class="${prefixCls}">
<div class="${prefixCls}-head">
<div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
<div class="${prefixCls}-head-title">{{{ title }}}</div>
</div>
<div class="${prefixCls}-body">
<div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
{{{ body }}}
</div>
<div class="${prefixCls}-footer">
<i-button type="ghost" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
<i-button type="text" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
</div>
</div>
@ -53,8 +53,8 @@ Modal.newInstance = properties => {
computed: {
iconTypeCls () {
return [
`${prefixCls}-head-icon`,
`${prefixCls}-head-icon-${this.iconType}`
`${prefixCls}-body-icon`,
`${prefixCls}-body-icon-${this.iconType}`
]
},
iconNameCls () {

2
src/components/modal/modal.vue
View file

@ -12,7 +12,7 @@
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
<i-button type="ghost" size="large" @click="cancel">{{ cancelText }}</i-button>
<i-button type="text" size="large" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
</slot>
</div>

2
src/components/poptip/poptip.vue
View file

@ -21,7 +21,7 @@
<div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
</div>
<div :class="[prefixCls + '-footer']">
<i-button type="ghost" size="small" @click="cancel">{{ cancelText }}</i-button>
<i-button type="text" size="small" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
</div>
</div>

4
src/styles/components/button.less
View file

@ -66,10 +66,6 @@
.btn-color(@info-color);
}
//&-dashed {
// .btn-dashed;
//}
&-circle,
&-circle-outline {
.btn-circle(@btn-prefix-cls);

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

@ -79,15 +79,30 @@
}
.@{confirm-prefix-cls} {
padding: 10px 25px 20px;
padding: 0 4px;
&-head {
&-icon {
&-title {
display: inline-block;
font-size: 28px;
margin-right: 5px;
padding: 0 1px;
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;
top: 5px;
&-icon {
font-size: 36px;
position: absolute;
top: 0;
left: 0;
&-info {
color: @primary-color;
@ -105,24 +120,10 @@
color: @warning-color;
}
}
&-title {
display: inline-block;
font-size: @font-size-base;
color: @text-color;
font-weight: 700;
}
}
&-body{
margin-left: 35px;
margin-top: 8px;
font-size: 12px;
color: @text-color;
}
&-footer{
margin-top: 20px;
margin-top: 40px;
text-align: right;
button + button {

2
src/styles/mixins/button.less
View file

@ -222,7 +222,7 @@
// Text
.btn-text() {
.button-variant(@link-color, @btn-ghost-bg, transparent);
.button-variant(@btn-ghost-color, @btn-ghost-bg, transparent);
// for disabled
&.disabled,

2
test/routers/button.vue
View file

@ -7,7 +7,7 @@
<i-button type="info">按钮</i-button>
<i-button icon="ios-search" type="success"></i-button>
<br><br>
<div style="width:400px;height:200px;">
<div style="width:400px">
<i-button type="error" long size="small">按钮</i-button>
</div>
<br><br>

66
test/routers/message.vue
View file

@ -1,41 +1,43 @@
<template>
<i-button @click="instance('info')">消息</i-button>
<i-button @click="instance('success')">成功</i-button>
<i-button @click="instance('warning')">警告</i-button>
<i-button @click="instance('error')">错误</i-button>
<i-button @click="confirm">标准</i-button>
<i-button @click="custom">自定义按钮文字</i-button>
<i-button @click="async">异步关闭</i-button>
</template>
<script>
export default {
methods: {
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;
confirm () {
this.$Modal.confirm({
title: '确认对话框标题',
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
onOk: () => {
this.$Message.info('点击了确定');
},
onCancel: () => {
this.$Message.info('点击了取消');
}
});
},
custom () {
this.$Modal.confirm({
title: '确认对话框标题',
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
okText: 'OK',
cancelText: 'Cancel'
});
},
async () {
this.$Modal.confirm({
title: '确认对话框标题',
content: '<p>对话框将在 2秒 后关闭</p>',
loading: true,
onOk: () => {
setTimeout(() => {
this.$Modal.remove();
this.$Message.info('异步关闭了对话框');
}, 2000);
}
});
}
}
}