change sync to loading
This commit is contained in:
parent
325243d30a
commit
9f45c24f2e
5 changed files with 36 additions and 46 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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 () {
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue