update Modal Icons
This commit is contained in:
parent
36e46e5a77
commit
06a4433d86
2 changed files with 21 additions and 35 deletions
|
@ -1,44 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Button @click="instance('info')">Info</Button>
|
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
|
||||||
<Button @click="instance('success')">Success</Button>
|
<Modal
|
||||||
<Button @click="instance('warning')">Warning</Button>
|
v-model="modal1"
|
||||||
<Button @click="instance('error')">Error</Button>
|
title="Common Modal dialog box title"
|
||||||
|
@on-ok="ok"
|
||||||
|
@on-cancel="cancel">
|
||||||
|
<p>Content of dialog</p>
|
||||||
|
<p>Content of dialog</p>
|
||||||
|
<p>Content of dialog</p>
|
||||||
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
modal1: false
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
instance (type) {
|
ok () {
|
||||||
const title = 'Title';
|
this.$Message.info('Clicked ok');
|
||||||
const content = '<p>Content of dialog</p><p>Content of dialog</p>';
|
},
|
||||||
switch (type) {
|
cancel () {
|
||||||
case 'info':
|
this.$Message.info('Clicked cancel');
|
||||||
this.$Modal.info({
|
|
||||||
title: title,
|
|
||||||
content: content,
|
|
||||||
closable: true
|
|
||||||
});
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<div :class="[prefixCls + '-content']">
|
<div :class="[prefixCls + '-content']">
|
||||||
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
|
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
|
||||||
<slot name="close">
|
<slot name="close">
|
||||||
<Icon type="ios-close-empty"></Icon>
|
<Icon type="ios-close"></Icon>
|
||||||
</slot>
|
</slot>
|
||||||
</a>
|
</a>
|
||||||
<div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
|
<div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
|
||||||
|
|
Loading…
Add table
Reference in a new issue