other / 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 +6,7 @@
6 width="70" 6 width="70"
7 title="普通的Modal对话框标题" 7 title="普通的Modal对话框标题"
8 @on-ok="ok" 8 @on-ok="ok"
  9 + :transfer="true"
9 @on-cancel="cancel"> 10 @on-cancel="cancel">
10 <div> 11 <div>
11 <Form :model="formItem" :label-width="80"> 12 <Form :model="formItem" :label-width="80">
examples/routers/poptip.vue
  Show/Hide comments   View file @548eac4
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Poptip trigger="hover" transfer title="提示标题" content="提示内容"> 3 + <Poptip trigger="hover" title="提示标题" content="提示内容">
4 <Button>hover 激活</Button> 4 <Button>hover 激活</Button>
5 </Poptip> 5 </Poptip>
6 <Poptip title="提示标题" content="提示内容"> 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 <template> 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 </template> 146 </template>
10 <script> 147 <script>
11 - import test from '../components/test.vue';  
12 export default { 148 export default {
13 - data () {  
14 - return {  
15 - columns2: [ 149 + data(){
  150 + return{
  151 + dtData:[],
  152 + dtCols:[
16 { 153 {
17 type: 'selection', 154 type: 'selection',
18 width: 60, 155 width: 60,
19 align: 'center' 156 align: 'center'
20 }, 157 },
21 { 158 {
22 - title: '姓名', 159 + title: '分类名称',
23 key: 'name', 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 title: '操作', 164 title: '操作',
59 - key: 'action',  
60 fixed: 'right', 165 fixed: 'right',
61 width: 120, 166 width: 120,
62 render: (h, params) => { 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 methods: { 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 -</script> 192 -</script>
  193 +</script>
115 \ No newline at end of file 194 \ No newline at end of file
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @548eac4
@@ -12,7 +12,8 @@ @@ -12,7 +12,8 @@
12 ref="drop" 12 ref="drop"
13 @mouseenter.native="handleMouseenter" 13 @mouseenter.native="handleMouseenter"
14 @mouseleave.native="handleMouseleave" 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 </transition> 17 </transition>
17 </div> 18 </div>
18 </template> 19 </template>
src/components/modal/modal.vue
  Show/Hide comments   View file @548eac4
1 <template> 1 <template>
2 - <div v-transfer-dom> 2 + <div v-transfer-dom :data-transfer="transfer">
3 <transition :name="transitionNames[1]"> 3 <transition :name="transitionNames[1]">
4 <div :class="maskClasses" v-show="visible" @click="mask"></div> 4 <div :class="maskClasses" v-show="visible" @click="mask"></div>
5 </transition> 5 </transition>
@@ -91,6 +91,10 @@ @@ -91,6 +91,10 @@
91 default () { 91 default () {
92 return ['ease', 'fade']; 92 return ['ease', 'fade'];
93 } 93 }
  94 + },
  95 + transfer: {
  96 + type: Boolean,
  97 + default: true
94 } 98 }
95 }, 99 },
96 data () { 100 data () {
src/components/poptip/poptip.vue
  Show/Hide comments   View file @548eac4
@@ -20,7 +20,8 @@ @@ -20,7 +20,8 @@
20 v-show="visible" 20 v-show="visible"
21 @mouseenter="handleMouseenter" 21 @mouseenter="handleMouseenter"
22 @mouseleave="handleMouseleave" 22 @mouseleave="handleMouseleave"
23 - v-transfer-dom:forbidden="transfer"> 23 + :data-transfer="transfer"
  24 + v-transfer-dom>
24 <div :class="[prefixCls + '-content']"> 25 <div :class="[prefixCls + '-content']">
25 <div :class="[prefixCls + '-arrow']"></div> 26 <div :class="[prefixCls + '-arrow']"></div>
26 <div :class="[prefixCls + '-inner']" v-if="confirm"> 27 <div :class="[prefixCls + '-inner']" v-if="confirm">
src/components/table/table.vue
  Show/Hide comments   View file @548eac4
@@ -37,7 +37,7 @@ @@ -37,7 +37,7 @@
37 </table> 37 </table>
38 </div> 38 </div>
39 <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed"> 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 <table-head 41 <table-head
42 fixed="left" 42 fixed="left"
43 :prefix-cls="prefixCls" 43 :prefix-cls="prefixCls"
@@ -59,7 +59,7 @@ @@ -59,7 +59,7 @@
59 </div> 59 </div>
60 </div> 60 </div>
61 <div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle" v-if="isRightFixed"> 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 <table-head 63 <table-head
64 fixed="right" 64 fixed="right"
65 :prefix-cls="prefixCls" 65 :prefix-cls="prefixCls"
@@ -216,6 +216,14 @@ @@ -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 styles () { 227 styles () {
220 let style = {}; 228 let style = {};
221 if (this.height) { 229 if (this.height) {
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @548eac4
@@ -10,7 +10,8 @@ @@ -10,7 +10,8 @@
10 v-show="!disabled && (visible || always)" 10 v-show="!disabled && (visible || always)"
11 @mouseenter="handleShowPopper" 11 @mouseenter="handleShowPopper"
12 @mouseleave="handleClosePopper" 12 @mouseleave="handleClosePopper"
13 - v-transfer-dom:forbidden="transfer"> 13 + :data-transfer="transfer"
  14 + v-transfer-dom>
14 <div :class="[prefixCls + '-content']"> 15 <div :class="[prefixCls + '-content']">
15 <div :class="[prefixCls + '-arrow']"></div> 16 <div :class="[prefixCls + '-arrow']"></div>
16 <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div> 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,8 +15,8 @@ function getTarget (node) {
15 } 15 }
16 16
17 const directive = { 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 el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom'; 20 el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
21 const parentNode = el.parentNode; 21 const parentNode = el.parentNode;
22 if (!parentNode) return; 22 if (!parentNode) return;
@@ -37,8 +37,8 @@ const directive = { @@ -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 // need to make sure children are done updating (vs. `update`) 42 // need to make sure children are done updating (vs. `update`)
43 const ref$1 = el.__transferDomData; 43 const ref$1 = el.__transferDomData;
44 if (!ref$1) return; 44 if (!ref$1) return;
@@ -62,8 +62,8 @@ const directive = { @@ -62,8 +62,8 @@ const directive = {
62 getTarget(value).appendChild(el); 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 el.className = el.className.replace('v-transfer-dom', ''); 67 el.className = el.className.replace('v-transfer-dom', '');
68 const ref$1 = el.__transferDomData; 68 const ref$1 = el.__transferDomData;
69 if (!ref$1) return; 69 if (!ref$1) return;
src/styles/components/table.less
  Show/Hide comments   View file @548eac4
@@ -268,6 +268,16 @@ @@ -268,6 +268,16 @@
268 } 268 }
269 &-fixed-header{ 269 &-fixed-header{
270 overflow: hidden; 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 &-fixed-body{ 282 &-fixed-body{
273 overflow: hidden; 283 overflow: hidden;