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> <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
</FormItem> </FormItem>
<br><br> <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 class="ivu-load-loop" type="loading" size="30" color="#ff6600" />
<Icon type="ios-alert" size="30" color="#ff6600" /> <Icon type="ios-alert" size="30" color="#ff6600" />
<Icon class="ivu-load-loop" type="ios-sync" size="30" color="#ff6600" /> <Icon class="ivu-load-loop" type="ios-sync" size="30" color="#ff6600" />
</Form> </Form>

View file

@ -1,54 +1,16 @@
<template> <template>
<div> <Button @click="loading">Display loading...</Button>
<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>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
info () { loading () {
// this.$Message.info(''); const msg = this.$Message.loading({
this.$Message.success({ content: 'Loading...',
content: '这是一条普通提示2', duration: 0
duration: 500,
onClose () {
// console.log(123)
},
closable: true,
render (h) {
return h('Button',{
props: {
type: 'primary'
}
}, '这是render出来的');
}
})
},
success () {
this.$Message.success({
content: '这是一条成功的提示',
duration: 4
}); });
setTimeout(msg, 103000);
}, },
warning () {
this.$Message.warning('这是一条警告的提示');
},
error () {
this.$Message.error('对方不想说话,并且向你抛出了一个异常');
},
destroy () {
this.$Message.destroy();
}
},
mounted () {
// this.$Message.config({
// top: 50,
// duration: 3
// });
} }
} }
</script> </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-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> <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
<transition name="fade"> <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> </transition>
<input <input
:id="elementId" :id="elementId"

View file

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

View file

@ -29,3 +29,21 @@
.ivu-icon { .ivu-icon {
.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%;
}
}