drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

$Modal support SSR

Browse source
This commit is contained in:
Aresn 2017-06-01 12:32:00 +08:00
parent 24c8f4eaba
commit 77cf1cd573
3 changed files with 148 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

145
src/components/modal/confirm.js
View file

@ -1,8 +1,6 @@
import Vue from 'vue';
import Modal from './modal.vue';
import Icon from '../icon/icon.vue';
import iButton from '../button/button.vue';
import { camelcaseToHyphen } from '../../utils/assist';
import Button from '../button/button.vue';
import Locale from '../../mixins/locale';
const prefixCls = 'ivu-modal-confirm';
@ -10,36 +8,34 @@ const prefixCls = 'ivu-modal-confirm';
Modal.newInstance = properties => {
const _props = properties || {};
let props = '';
Object.keys(_props).forEach(prop => {
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
});
// let props = '';
// Object.keys(_props).forEach(prop => {
// props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
// });
//
// const div = document.createElement('div');
// div.innerHTML = `
// <Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
// <div class="${prefixCls}">
// <div class="${prefixCls}-head">
// <div class="${prefixCls}-head-title" v-html="title"></div>
// </div>
// <div class="${prefixCls}-body">
// <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
// <div v-html="body"></div>
// </div>
// <div class="${prefixCls}-footer">
// <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
// <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
// </div>
// </div>
// </Modal>
// `;
// document.body.appendChild(div);
const div = document.createElement('div');
div.innerHTML = `
<Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
<div class="${prefixCls}">
<div class="${prefixCls}-head">
<div class="${prefixCls}-head-title" v-html="title"></div>
</div>
<div class="${prefixCls}-body">
<div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
<div v-html="body"></div>
</div>
<div class="${prefixCls}-footer">
<i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
</div>
</div>
</Modal>
`;
document.body.appendChild(div);
const modal = new Vue({
el: div,
const Instance = new Vue({
mixins: [ Locale ],
components: { Modal, iButton, Icon },
data: Object.assign(_props, {
data: Object.assign({}, _props, {
visible: false,
width: 416,
title: '',
@ -53,6 +49,87 @@ Modal.newInstance = properties => {
buttonLoading: false,
scrollable: false
}),
render (h) {
let footerVNodes = [];
if (this.showCancel) {
footerVNodes.push(h(Button, {
props: {
type: 'text',
size: 'large'
},
on: {
click: this.cancel
}
}, this.localeCancelText));
}
footerVNodes.push(h(Button, {
props: {
type: 'primary',
size: 'large',
loading: this.buttonLoading
},
on: {
click: this.ok
}
}, this.localeOkText));
return h(Modal, {
props: Object.assign({}, _props, {
width: this.width,
scrollable: this.scrollable
}),
domProps: {
value: this.visible
},
on: {
input: (status) => {
this.visible = status;
}
}
}, [
h('div', {
attrs: {
class: prefixCls
}
}, [
h('div', {
attrs: {
class: `${prefixCls}-head`
}
}, h('div', {
attrs: {
class: `${prefixCls}-head-title`
},
domProps: {
innerHTML: this.title
}
})),
h('div', {
attrs: {
class: `${prefixCls}-body`
}
}, [
h('div', {
class: this.iconTypeCls
}, [
h('i', {
class: this.iconNameCls
})
]),
h('div', {
domProps: {
innerHTML: this.body
}
})
]),
h('div', {
attrs: {
class: `${prefixCls}-footer`
}
}, footerVNodes)
])
]);
},
computed: {
iconTypeCls () {
return [
@ -111,7 +188,11 @@ Modal.newInstance = properties => {
onCancel () {},
onRemove () {}
}
}).$children[0];
});
const component = Instance.$mount();
document.body.appendChild(component.$el);
const modal = Instance.$children[0];
return {
show (props) {