chenhaodong / mew-iview

Commit 548eac43fe9a510649fc85e86e9279ebaa969ad4

Authored by 梁灏
1 parent 3e4bab96

fixed #1387 and update v-transfer-dom 

Modal add transfer prop
Showing 10 changed files with 205 additions and 101 deletions   Show diff stats
Inline Side-by-side
examples/routers/modal.vue
  Show/Hide comments   View file @548eac4
... ... @@ -6,6 +6,7 @@
6 6 width="70"
7 7 title="普通的Modal对话框标题"
8 8 @on-ok="ok"
  9 + :transfer="true"
9 10 @on-cancel="cancel">
10 11 <div>
11 12 <Form :model="formItem" :label-width="80">
... ...
examples/routers/poptip.vue
  Show/Hide comments   View file @548eac4
1 1 <template>
2 2 <div>
3   - <Poptip trigger="hover" transfer title="提示标题" content="提示内容">
  3 + <Poptip trigger="hover" title="提示标题" content="提示内容">
4 4 <Button>hover 激活</Button>
5 5 </Poptip>
6 6 <Poptip title="提示标题" content="提示内容">
... ...
examples/routers/table.vue
  Show/Hide comments   View file @548eac4
  1 +<!--<template>-->
  2 + <!--<div>-->
  3 + <!--<Table-->
  4 + <!--width="500"-->
  5 + <!--border-->
  6 + <!--highlight-row-->
  7 + <!--:columns="columns2"-->
  8 + <!--@on-selection-change="change2"-->
  9 + <!--:data="data3"></Table>-->
  10 + <!--<Button @click="addData">添加数据</Button>-->
  11 + <!--</div>-->
  12 +<!--</template>-->
  13 +<!--<script>-->
  14 + <!--import test from '../components/test.vue';-->
  15 + <!--export default {-->
  16 + <!--data () {-->
  17 + <!--return {-->
  18 + <!--columns2: [-->
  19 +<!--// {-->
  20 +<!--// type: 'selection',-->
  21 +<!--// width: 60,-->
  22 +<!--// align: 'center'-->
  23 +<!--// },-->
  24 + <!--{-->
  25 + <!--title: '姓名',-->
  26 + <!--key: 'name',-->
  27 + <!--width: 100,-->
  28 +<!--// sortable: true,-->
  29 + <!--fixed: 'right',-->
  30 + <!--render: (h, params) => {-->
  31 + <!--return h('div', [-->
  32 + <!--h('Button', {-->
  33 + <!--props: {-->
  34 + <!--type: 'primary',-->
  35 + <!--size: 'small'-->
  36 + <!--},-->
  37 + <!--on: {-->
  38 + <!--click: this.edit-->
  39 + <!--},-->
  40 + <!--}, '修改')-->
  41 + <!--]);-->
  42 + <!--}-->
  43 + <!--},-->
  44 + <!--{-->
  45 + <!--title: '年龄',-->
  46 + <!--key: 'age',-->
  47 + <!--sortable: true,-->
  48 +<!--// width: 100-->
  49 + <!--},-->
  50 + <!--{-->
  51 + <!--title: '省份',-->
  52 + <!--key: 'province',-->
  53 + <!--sortable: true,-->
  54 +<!--// fixed: 'right',-->
  55 +<!--// width: 100-->
  56 + <!--},-->
  57 +<!--// {-->
  58 +<!--// title: '市区',-->
  59 +<!--// key: 'city',-->
  60 +<!--// width: 100-->
  61 +<!--// },-->
  62 +<!--// {-->
  63 +<!--// title: '地址',-->
  64 +<!--// key: 'address',-->
  65 +<!--// width: 200-->
  66 +<!--// },-->
  67 +<!--// {-->
  68 +<!--// title: '邮编',-->
  69 +<!--// key: 'zip',-->
  70 +<!--// width: 100-->
  71 +<!--// },-->
  72 +<!--// {-->
  73 +<!--// title: '操作',-->
  74 +<!--// key: 'action',-->
  75 +<!--// fixed: 'right',-->
  76 +<!--// width: 120,-->
  77 +<!--// render: (h, params) => {-->
  78 +<!--// return h(test);-->
  79 +<!--// }-->
  80 +<!--// }-->
  81 + <!--],-->
  82 + <!--data3: [-->
  83 +<!--// {-->
  84 +<!--// name: '王小明',-->
  85 +<!--// age: 18,-->
  86 +<!--// address: '北京市朝阳区芍药居',-->
  87 +<!--// province: '北京市',-->
  88 +<!--// city: '朝阳区',-->
  89 +<!--// zip: 100000-->
  90 +<!--// },-->
  91 +<!--// {-->
  92 +<!--// name: '张小刚',-->
  93 +<!--// age: 25,-->
  94 +<!--// address: '北京市海淀区西二旗',-->
  95 +<!--// province: '北京市',-->
  96 +<!--// city: '海淀区',-->
  97 +<!--// zip: 100000-->
  98 +<!--// },-->
  99 +<!--// {-->
  100 +<!--// name: '李小红',-->
  101 +<!--// age: 30,-->
  102 +<!--// address: '上海市浦东新区世纪大道',-->
  103 +<!--// province: '上海市',-->
  104 +<!--// city: '浦东新区',-->
  105 +<!--// zip: 100000-->
  106 +<!--// },-->
  107 +<!--// {-->
  108 +<!--// name: '周小伟',-->
  109 +<!--// age: 26,-->
  110 +<!--// address: '深圳市南山区深南大道',-->
  111 +<!--// province: '广东',-->
  112 +<!--// city: '南山区',-->
  113 +<!--// zip: 100000-->
  114 +<!--// }-->
  115 + <!--]-->
  116 + <!--}-->
  117 + <!--},-->
  118 + <!--methods: {-->
  119 + <!--change1 (d, l) {-->
  120 +<!--// console.log(d)-->
  121 +<!--// console.log(l)-->
  122 + <!--},-->
  123 + <!--change2 (d, l) {-->
  124 + <!--console.log(d);-->
  125 + <!--console.log(l);-->
  126 + <!--},-->
  127 + <!--addData () {-->
  128 + <!--this.data3.push({-->
  129 + <!--name: '周小伟',-->
  130 + <!--age: 26,-->
  131 + <!--address: '深圳市南山区深南大道',-->
  132 + <!--province: '广东',-->
  133 + <!--city: '南山区',-->
  134 + <!--zip: 100000-->
  135 + <!--})-->
  136 + <!--}-->
  137 + <!--}-->
  138 + <!--}-->
  139 +<!--</script>-->
  140 +
1 141 <template>
2   - <Table
3   - width="550"
4   - border
5   - highlight-row
6   - :columns="columns2"
7   - @on-selection-change="change2"
8   - :data="data3"></Table>
  142 + <div>
  143 + <i-table :data="dtData" :height="400" :columns="dtCols" border highlight-row></i-table>
  144 + <Button type="ghost" @click="addData"> add data</Button>
  145 + </div>
9 146 </template>
10 147 <script>
11   - import test from '../components/test.vue';
12 148 export default {
13   - data () {
14   - return {
15   - columns2: [
  149 + data(){
  150 + return{
  151 + dtData:[],
  152 + dtCols:[
16 153 {
17 154 type: 'selection',
18 155 width: 60,
19 156 align: 'center'
20 157 },
21 158 {
22   - title: '姓名',
  159 + title: '分类名称',
23 160 key: 'name',
24   - width: 100,
25   - sortable: true,
26   -// fixed: 'left',
27   -// renderHeader: (h, params) => {
28   -// return h('Tag', params.index)
29   -// }
30   - },
31   - {
32   - title: '年龄',
33   - key: 'age',
34   - sortable: true,
35   - width: 100
36   - },
37   - {
38   - title: '省份',
39   - key: 'province',
40   - width: 100
41   - },
42   - {
43   - title: '市区',
44   - key: 'city',
45   - width: 100
46   - },
47   - {
48   - title: '地址',
49   - key: 'address',
50   - width: 200
51   - },
52   - {
53   - title: '邮编',
54   - key: 'zip',
55   - width: 100
  161 + sortable: true
56 162 },
57 163 {
58 164 title: '操作',
59   - key: 'action',
60 165 fixed: 'right',
61 166 width: 120,
62 167 render: (h, params) => {
63   - return h(test);
  168 + return h('div', [
  169 + h('Button', {
  170 + props: {
  171 + type: 'primary',
  172 + size: 'small'
  173 + },
  174 + on: {
  175 + click: this.edit
  176 + },
  177 + }, '修改')
  178 + ]);
64 179 }
65 180 }
66   - ],
67   - data3: [
68   - {
69   - name: '王小明',
70   - age: 18,
71   - address: '北京市朝阳区芍药居',
72   - province: '北京市',
73   - city: '朝阳区',
74   - zip: 100000
75   - },
76   - {
77   - name: '张小刚',
78   - age: 25,
79   - address: '北京市海淀区西二旗',
80   - province: '北京市',
81   - city: '海淀区',
82   - zip: 100000
83   - },
84   - {
85   - name: '李小红',
86   - age: 30,
87   - address: '上海市浦东新区世纪大道',
88   - province: '上海市',
89   - city: '浦东新区',
90   - zip: 100000
91   - },
92   - {
93   - name: '周小伟',
94   - age: 26,
95   - address: '深圳市南山区深南大道',
96   - province: '广东',
97   - city: '南山区',
98   - zip: 100000
99   - }
100 181 ]
101 182 }
102 183 },
103 184 methods: {
104   - change1 (d, l) {
105   -// console.log(d)
106   -// console.log(l)
107   - },
108   - change2 (d, l) {
109   - console.log(d);
110   - console.log(l);
  185 + addData () {
  186 + this.dtData.push({
  187 + name: '发送到附件是'
  188 + })
111 189 }
112 190 }
113 191 }
114 192 -</script>
  193 +</script>
115 194 \ No newline at end of file
... ...
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @548eac4
... ... @@ -12,7 +12,8 @@
12 12 ref="drop"
13 13 @mouseenter.native="handleMouseenter"
14 14 @mouseleave.native="handleMouseleave"
15   - v-transfer-dom:forbidden="transfer"><slot name="list"></slot></Drop>
  15 + :data-transfer="transfer"
  16 + v-transfer-dom><slot name="list"></slot></Drop>
16 17 </transition>
17 18 </div>
18 19 </template>
... ...
src/components/modal/modal.vue
  Show/Hide comments   View file @548eac4
1 1 <template>
2   - <div v-transfer-dom>
  2 + <div v-transfer-dom :data-transfer="transfer">
3 3 <transition :name="transitionNames[1]">
4 4 <div :class="maskClasses" v-show="visible" @click="mask"></div>
5 5 </transition>
... ... @@ -91,6 +91,10 @@
91 91 default () {
92 92 return ['ease', 'fade'];
93 93 }
  94 + },
  95 + transfer: {
  96 + type: Boolean,
  97 + default: true
94 98 }
95 99 },
96 100 data () {
... ...
src/components/poptip/poptip.vue
  Show/Hide comments   View file @548eac4
... ... @@ -20,7 +20,8 @@
20 20 v-show="visible"
21 21 @mouseenter="handleMouseenter"
22 22 @mouseleave="handleMouseleave"
23   - v-transfer-dom:forbidden="transfer">
  23 + :data-transfer="transfer"
  24 + v-transfer-dom>
24 25 <div :class="[prefixCls + '-content']">
25 26 <div :class="[prefixCls + '-arrow']"></div>
26 27 <div :class="[prefixCls + '-inner']" v-if="confirm">
... ...
src/components/table/table.vue
  Show/Hide comments   View file @548eac4
... ... @@ -37,7 +37,7 @@
37 37 </table>
38 38 </div>
39 39 <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed">
40   - <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
  40 + <div :class="fixedHeaderClasses" v-if="showHeader">
41 41 <table-head
42 42 fixed="left"
43 43 :prefix-cls="prefixCls"
... ... @@ -59,7 +59,7 @@
59 59 </div>
60 60 </div>
61 61 <div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle" v-if="isRightFixed">
62   - <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
  62 + <div :class="fixedHeaderClasses" v-if="showHeader">
63 63 <table-head
64 64 fixed="right"
65 65 :prefix-cls="prefixCls"
... ... @@ -216,6 +216,14 @@
216 216 }
217 217 ];
218 218 },
  219 + fixedHeaderClasses () {
  220 + return [
  221 + `${prefixCls}-fixed-header`,
  222 + {
  223 + [`${prefixCls}-fixed-header-with-empty`]: !this.rebuildData.length
  224 + }
  225 + ];
  226 + },
219 227 styles () {
220 228 let style = {};
221 229 if (this.height) {
... ...
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @548eac4
... ... @@ -10,7 +10,8 @@
10 10 v-show="!disabled && (visible || always)"
11 11 @mouseenter="handleShowPopper"
12 12 @mouseleave="handleClosePopper"
13   - v-transfer-dom:forbidden="transfer">
  13 + :data-transfer="transfer"
  14 + v-transfer-dom>
14 15 <div :class="[prefixCls + '-content']">
15 16 <div :class="[prefixCls + '-arrow']"></div>
16 17 <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
... ...
src/directives/transfer-dom.js
  Show/Hide comments   View file @548eac4
... ... @@ -15,8 +15,8 @@ function getTarget (node) {
15 15 }
16 16  
17 17 const directive = {
18   - inserted (el, { value, arg }, vnode) {
19   - if (arg.forbidden) return false;
  18 + inserted (el, { value }, vnode) {
  19 + if (el.dataset.transfer !== 'true') return false;
20 20 el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
21 21 const parentNode = el.parentNode;
22 22 if (!parentNode) return;
... ... @@ -37,8 +37,8 @@ const directive = {
37 37 }
38 38 }
39 39 },
40   - componentUpdated (el, { value, arg }) {
41   - if (arg.forbidden) return false;
  40 + componentUpdated (el, { value }) {
  41 + if (el.dataset.transfer !== 'true') return false;
42 42 // need to make sure children are done updating (vs. `update`)
43 43 const ref$1 = el.__transferDomData;
44 44 if (!ref$1) return;
... ... @@ -62,8 +62,8 @@ const directive = {
62 62 getTarget(value).appendChild(el);
63 63 }
64 64 },
65   - unbind (el, { arg } ) {
66   - if (arg.forbidden) return false;
  65 + unbind (el) {
  66 + if (el.dataset.transfer !== 'true') return false;
67 67 el.className = el.className.replace('v-transfer-dom', '');
68 68 const ref$1 = el.__transferDomData;
69 69 if (!ref$1) return;
... ...
src/styles/components/table.less
  Show/Hide comments   View file @548eac4
... ... @@ -268,6 +268,16 @@
268 268 }
269 269 &-fixed-header{
270 270 overflow: hidden;
  271 + &-with-empty{
  272 + .@{table-prefix-cls}-hidden{
  273 + .@{table-prefix-cls}-sort{
  274 + display: none;
  275 + }
  276 + .@{table-prefix-cls}-cell span{
  277 + display: none;
  278 + }
  279 + }
  280 + }
271 281 }
272 282 &-fixed-body{
273 283 overflow: hidden;
... ...