update $Modal with render
This commit is contained in:
parent
f4273043c2
commit
172e4396df
2 changed files with 56 additions and 54 deletions
|
@ -1,43 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Button @click="instance('info')">Info</Button>
|
<p>
|
||||||
<Button @click="instance('success')">Success</Button>
|
Name: {{ value }}
|
||||||
<Button @click="instance('warning')">Warning</Button>
|
</p>
|
||||||
<Button @click="instance('error')">Error</Button>
|
<p>
|
||||||
|
<Button @click="handleRender">Custom content</Button>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
value: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
instance (type) {
|
handleRender () {
|
||||||
const title = '对话框的标题';
|
this.$Modal.confirm({
|
||||||
const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
|
title: '真不错呀',
|
||||||
switch (type) {
|
render: (h) => {
|
||||||
case 'info':
|
return h('Input', {
|
||||||
this.$Modal.info({
|
props: {
|
||||||
title: title,
|
value: this.value,
|
||||||
content: content
|
autofocus: true,
|
||||||
});
|
placeholder: 'Please enter your name...'
|
||||||
break;
|
},
|
||||||
case 'success':
|
on: {
|
||||||
this.$Modal.success({
|
input: (val) => {
|
||||||
title: title,
|
this.value = val;
|
||||||
content: content
|
}
|
||||||
});
|
}
|
||||||
break;
|
})
|
||||||
case 'warning':
|
}
|
||||||
this.$Modal.warning({
|
})
|
||||||
title: title,
|
|
||||||
content: content
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'error':
|
|
||||||
this.$Modal.error({
|
|
||||||
title: title,
|
|
||||||
content: content
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -71,6 +71,32 @@ Modal.newInstance = properties => {
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// when render with no title, hide head
|
||||||
|
let head_render;
|
||||||
|
if (this.title) {
|
||||||
|
head_render = h('div', {
|
||||||
|
attrs: {
|
||||||
|
class: `${prefixCls}-head`
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('div', {
|
||||||
|
class: this.iconTypeCls
|
||||||
|
}, [
|
||||||
|
h('i', {
|
||||||
|
class: this.iconNameCls
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
h('div', {
|
||||||
|
attrs: {
|
||||||
|
class: `${prefixCls}-head-title`
|
||||||
|
},
|
||||||
|
domProps: {
|
||||||
|
innerHTML: this.title
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
return h(Modal, {
|
return h(Modal, {
|
||||||
props: Object.assign({}, _props, {
|
props: Object.assign({}, _props, {
|
||||||
width: this.width,
|
width: this.width,
|
||||||
|
@ -91,27 +117,7 @@ Modal.newInstance = properties => {
|
||||||
class: prefixCls
|
class: prefixCls
|
||||||
}
|
}
|
||||||
}, [
|
}, [
|
||||||
h('div', {
|
head_render,
|
||||||
attrs: {
|
|
||||||
class: `${prefixCls}-head`
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
h('div', {
|
|
||||||
class: this.iconTypeCls
|
|
||||||
}, [
|
|
||||||
h('i', {
|
|
||||||
class: this.iconNameCls
|
|
||||||
})
|
|
||||||
]),
|
|
||||||
h('div', {
|
|
||||||
attrs: {
|
|
||||||
class: `${prefixCls}-head-title`
|
|
||||||
},
|
|
||||||
domProps: {
|
|
||||||
innerHTML: this.title
|
|
||||||
}
|
|
||||||
})
|
|
||||||
]),
|
|
||||||
body_render,
|
body_render,
|
||||||
h('div', {
|
h('div', {
|
||||||
attrs: {
|
attrs: {
|
||||||
|
|
Loading…
Add table
Reference in a new issue