change sync to loading

This commit is contained in:
梁灏 2018-06-25 15:49:28 +08:00
parent 325243d30a
commit 9f45c24f2e
5 changed files with 36 additions and 46 deletions

View file

@ -14,7 +14,17 @@
<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
</FormItem>
<br><br>
<Icon class="ivu-load-loop" type="loading" size="14" color="#ff6600" />
<Icon class="ivu-load-loop" type="loading" size="12" color="#ff6600" />
<Icon class="ivu-load-loop" type="loading" size="13" color="#ff6600" />
<Icon class="ivu-load-loop" type="loading" size="16" color="#ff6600" />
<Icon class="ivu-load-loop" type="loading" size="18" color="#ff6600" />
<Icon class="ivu-load-loop" type="loading" size="20" color="#ff6600" />
<Icon class="ivu-load-loop" type="loading" size="30" color="#ff6600" />
<Icon class="ivu-load-loop" type="loading" size="30" color="#ff6600" />
<Icon type="ios-alert" size="30" color="#ff6600" />
<Icon class="ivu-load-loop" type="ios-sync" size="30" color="#ff6600" />
</Form>

View file

@ -1,54 +1,16 @@
<template>
<div>
<i-button @click.native="info">显示普通提示</i-button>
<i-button @click.native="success">显示成功提示</i-button>
<i-button @click.native="warning">显示警告提示</i-button>
<i-button @click.native="error">显示错误提示</i-button>
<i-button @click.native="destroy">销毁提示</i-button>
</div>
<Button @click="loading">Display loading...</Button>
</template>
<script>
export default {
methods: {
info () {
// this.$Message.info('');
this.$Message.success({
content: '这是一条普通提示2',
duration: 500,
onClose () {
// console.log(123)
},
closable: true,
render (h) {
return h('Button',{
props: {
type: 'primary'
}
}, '这是render出来的');
}
})
},
success () {
this.$Message.success({
content: '这是一条成功的提示',
duration: 4
loading () {
const msg = this.$Message.loading({
content: 'Loading...',
duration: 0
});
setTimeout(msg, 103000);
},
warning () {
this.$Message.warning('这是一条警告的提示');
},
error () {
this.$Message.error('对方不想说话,并且向你抛出了一个异常');
},
destroy () {
this.$Message.destroy();
}
},
mounted () {
// this.$Message.config({
// top: 50,
// duration: 3
// });
}
}
</script>

View file

@ -5,7 +5,7 @@
<i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
<transition name="fade">
<i class="ivu-icon ivu-icon-ios-sync ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
<i class="ivu-icon ivu-icon-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
</transition>
<input
:id="elementId"

View file

@ -17,7 +17,7 @@ const iconTypes = {
'success': 'ios-checkmark-circle',
'warning': 'ios-alert',
'error': 'ios-close-circle',
'loading': 'ios-sync'
'loading': 'loading'
};
function getMessageInstance () {

View file

@ -29,3 +29,21 @@
.ivu-icon {
.ivu-icon();
}
.ivu-icon-loading{
position: relative;
&::before{
content: "\F1F6";
}
&::after{
content: "";
display: block;
width: 50%;
height: 50%;
background: #fff;
position: absolute;
top: 1px;
left: 50%;
}
}