other / mew-iview

Commit 172e4396dfbb7f0a14757061f7e806bea2e90fe9

Authored by 梁灏
1 parent f4273043

update $Modal with render

Showing 2 changed files with 56 additions and 54 deletions   Show diff stats
Inline Side-by-side
examples/routers/modal.vue
  Show/Hide comments   View file @172e439
1 1 <template>
2 2 <div>
3   - <Button @click="instance('info')">Info</Button>
4   - <Button @click="instance('success')">Success</Button>
5   - <Button @click="instance('warning')">Warning</Button>
6   - <Button @click="instance('error')">Error</Button>
  3 + <p>
  4 + Name: {{ value }}
  5 + </p>
  6 + <p>
  7 + <Button @click="handleRender">Custom content</Button>
  8 + </p>
7 9 </div>
8 10 </template>
9 11 <script>
10 12 export default {
  13 + data () {
  14 + return {
  15 + value: ''
  16 + }
  17 + },
11 18 methods: {
12   - instance (type) {
13   - const title = '对话框的标题';
14   - const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
15   - switch (type) {
16   - case 'info':
17   - this.$Modal.info({
18   - title: title,
19   - content: content
20   - });
21   - break;
22   - case 'success':
23   - this.$Modal.success({
24   - title: title,
25   - content: content
26   - });
27   - break;
28   - case 'warning':
29   - this.$Modal.warning({
30   - title: title,
31   - content: content
32   - });
33   - break;
34   - case 'error':
35   - this.$Modal.error({
36   - title: title,
37   - content: content
38   - });
39   - break;
40   - }
  19 + handleRender () {
  20 + this.$Modal.confirm({
  21 + title: '真不错呀',
  22 + render: (h) => {
  23 + return h('Input', {
  24 + props: {
  25 + value: this.value,
  26 + autofocus: true,
  27 + placeholder: 'Please enter your name...'
  28 + },
  29 + on: {
  30 + input: (val) => {
  31 + this.value = val;
  32 + }
  33 + }
  34 + })
  35 + }
  36 + })
41 37 }
42 38 }
43 39 }
... ...
src/components/modal/confirm.js
  Show/Hide comments   View file @172e439
... ... @@ -71,6 +71,32 @@ Modal.newInstance = properties =&gt; {
71 71 ]);
72 72 }
73 73  
  74 + // when render with no title, hide head
  75 + let head_render;
  76 + if (this.title) {
  77 + head_render = h('div', {
  78 + attrs: {
  79 + class: `${prefixCls}-head`
  80 + }
  81 + }, [
  82 + h('div', {
  83 + class: this.iconTypeCls
  84 + }, [
  85 + h('i', {
  86 + class: this.iconNameCls
  87 + })
  88 + ]),
  89 + h('div', {
  90 + attrs: {
  91 + class: `${prefixCls}-head-title`
  92 + },
  93 + domProps: {
  94 + innerHTML: this.title
  95 + }
  96 + })
  97 + ]);
  98 + }
  99 +
74 100 return h(Modal, {
75 101 props: Object.assign({}, _props, {
76 102 width: this.width,
... ... @@ -91,27 +117,7 @@ Modal.newInstance = properties =&gt; {
91 117 class: prefixCls
92 118 }
93 119 }, [
94   - h('div', {
95   - attrs: {
96   - class: `${prefixCls}-head`
97   - }
98   - }, [
99   - h('div', {
100   - class: this.iconTypeCls
101   - }, [
102   - h('i', {
103   - class: this.iconNameCls
104   - })
105   - ]),
106   - h('div', {
107   - attrs: {
108   - class: `${prefixCls}-head-title`
109   - },
110   - domProps: {
111   - innerHTML: this.title
112   - }
113   - })
114   - ]),
  120 + head_render,
115 121 body_render,
116 122 h('div', {
117 123 attrs: {
... ...