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

fixed #1387 and update v-transfer-dom

Browse source 
Modal add transfer prop
This commit is contained in:
梁灏 2017-07-19 13:58:20 +08:00
parent 3e4bab9655
commit 548eac43fe
10 changed files with 205 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/routers/modal.vue
View file

@ -6,6 +6,7 @@
width="70" width="70"
title="普通的Modal对话框标题" title="普通的Modal对话框标题"
@on-ok="ok" @on-ok="ok"
:transfer="true"
@on-cancel="cancel"> @on-cancel="cancel">
<div> <div>
<Form :model="formItem" :label-width="80"> <Form :model="formItem" :label-width="80">

2
examples/routers/poptip.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<Poptip trigger="hover" transfer title="提示标题" content="提示内容"> <Poptip trigger="hover" title="提示标题" content="提示内容">
<Button>hover 激活</Button> <Button>hover 激活</Button>
</Poptip> </Poptip>
<Poptip title="提示标题" content="提示内容"> <Poptip title="提示标题" content="提示内容">

248
examples/routers/table.vue
View file

@ -1,113 +1,191 @@
<!--<template>-->
<!--<div>-->
<!--<Table-->
<!--width="500"-->
<!--border-->
<!--highlight-row-->
<!--:columns="columns2"-->
<!--@on-selection-change="change2"-->
<!--:data="data3"></Table>-->
<!--<Button @click="addData">添加数据</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--import test from '../components/test.vue';-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--columns2: [-->
<!--// {-->
<!--// type: 'selection',-->
<!--// width: 60,-->
<!--// align: 'center'-->
<!--// },-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name',-->
<!--width: 100,-->
<!--// sortable: true,-->
<!--fixed: 'right',-->
<!--render: (h, params) => {-->
<!--return h('div', [-->
<!--h('Button', {-->
<!--props: {-->
<!--type: 'primary',-->
<!--size: 'small'-->
<!--},-->
<!--on: {-->
<!--click: this.edit-->
<!--},-->
<!--}, '修改')-->
<!--]);-->
<!--}-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age',-->
<!--sortable: true,-->
<!--// width: 100-->
<!--},-->
<!--{-->
<!--title: '省份',-->
<!--key: 'province',-->
<!--sortable: true,-->
<!--// fixed: 'right',-->
<!--// width: 100-->
<!--},-->
<!--// {-->
<!--// title: '市区',-->
<!--// key: 'city',-->
<!--// width: 100-->
<!--// },-->
<!--// {-->
<!--// title: '地址',-->
<!--// key: 'address',-->
<!--// width: 200-->
<!--// },-->
<!--// {-->
<!--// title: '邮编',-->
<!--// key: 'zip',-->
<!--// width: 100-->
<!--// },-->
<!--// {-->
<!--// title: '操作',-->
<!--// key: 'action',-->
<!--// fixed: 'right',-->
<!--// width: 120,-->
<!--// render: (h, params) => {-->
<!--// return h(test);-->
<!--// }-->
<!--// }-->
<!--],-->
<!--data3: [-->
<!--// {-->
<!--// name: '王小明',-->
<!--// age: 18,-->
<!--// address: '北京市朝阳区芍药居',-->
<!--// province: '北京市',-->
<!--// city: '朝阳区',-->
<!--// zip: 100000-->
<!--// },-->
<!--// {-->
<!--// name: '张小刚',-->
<!--// age: 25,-->
<!--// address: '北京市海淀区西二旗',-->
<!--// province: '北京市',-->
<!--// city: '海淀区',-->
<!--// zip: 100000-->
<!--// },-->
<!--// {-->
<!--// name: '李小红',-->
<!--// age: 30,-->
<!--// address: '上海市浦东新区世纪大道',-->
<!--// province: '上海市',-->
<!--// city: '浦东新区',-->
<!--// zip: 100000-->
<!--// },-->
<!--// {-->
<!--// name: '周小伟',-->
<!--// age: 26,-->
<!--// address: '深圳市南山区深南大道',-->
<!--// province: '广东',-->
<!--// city: '南山区',-->
<!--// zip: 100000-->
<!--// }-->
<!--]-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--change1 (d, l) {-->
<!--// console.log(d)-->
<!--// console.log(l)-->
<!--},-->
<!--change2 (d, l) {-->
<!--console.log(d);-->
<!--console.log(l);-->
<!--},-->
<!--addData () {-->
<!--this.data3.push({-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道',-->
<!--province: '广东',-->
<!--city: '南山区',-->
<!--zip: 100000-->
<!--})-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<Table <div>
width="550" <i-table :data="dtData" :height="400" :columns="dtCols" border highlight-row></i-table>
border <Button type="ghost" @click="addData"> add data</Button>
highlight-row </div>
:columns="columns2"
@on-selection-change="change2"
:data="data3"></Table>
</template> </template>
<script> <script>
import test from '../components/test.vue';
export default { export default {
data(){ data(){
return{ return{
columns2: [ dtData:[],
dtCols:[
{ {
type: 'selection', type: 'selection',
width: 60, width: 60,
align: 'center' align: 'center'
}, },
{ {
title: '姓名', title: '分类名称',
key: 'name', key: 'name',
width: 100, sortable: true
sortable: true,
// fixed: 'left',
// renderHeader: (h, params) => {
// return h('Tag', params.index)
// }
},
{
title: '年龄',
key: 'age',
sortable: true,
width: 100
},
{
title: '省份',
key: 'province',
width: 100
},
{
title: '市区',
key: 'city',
width: 100
},
{
title: '地址',
key: 'address',
width: 200
},
{
title: '邮编',
key: 'zip',
width: 100
}, },
{ {
title: '操作', title: '操作',
key: 'action',
fixed: 'right', fixed: 'right',
width: 120, width: 120,
render: (h, params) => { render: (h, params) => {
return h(test); return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
on: {
click: this.edit
},
}, '修改')
]);
} }
} }
],
data3: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
province: '北京市',
city: '朝阳区',
zip: 100000
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
province: '北京市',
city: '海淀区',
zip: 100000
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
province: '上海市',
city: '浦东新区',
zip: 100000
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
province: '广东',
city: '南山区',
zip: 100000
}
] ]
} }
}, },
methods: { methods: {
change1 (d, l) { addData () {
// console.log(d) this.dtData.push({
// console.log(l) name: '发送到附件是'
}, })
change2 (d, l) {
console.log(d);
console.log(l);
} }
} }
} }

3
src/components/dropdown/dropdown.vue
View file

@ -12,7 +12,8 @@
ref="drop" ref="drop"
@mouseenter.native="handleMouseenter" @mouseenter.native="handleMouseenter"
@mouseleave.native="handleMouseleave" @mouseleave.native="handleMouseleave"
v-transfer-dom:forbidden="transfer"><slot name="list"></slot></Drop> :data-transfer="transfer"
v-transfer-dom><slot name="list"></slot></Drop>
</transition> </transition>
</div> </div>
</template> </template>

6
src/components/modal/modal.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-transfer-dom> <div v-transfer-dom :data-transfer="transfer">
<transition :name="transitionNames[1]"> <transition :name="transitionNames[1]">
<div :class="maskClasses" v-show="visible" @click="mask"></div> <div :class="maskClasses" v-show="visible" @click="mask"></div>
</transition> </transition>
@ -91,6 +91,10 @@
default () { default () {
return ['ease', 'fade']; return ['ease', 'fade'];
} }
},
transfer: {
type: Boolean,
default: true
} }
}, },
data () { data () {

3
src/components/poptip/poptip.vue
View file

@ -20,7 +20,8 @@
v-show="visible" v-show="visible"
@mouseenter="handleMouseenter" @mouseenter="handleMouseenter"
@mouseleave="handleMouseleave" @mouseleave="handleMouseleave"
v-transfer-dom:forbidden="transfer"> :data-transfer="transfer"
v-transfer-dom>
<div :class="[prefixCls + '-content']"> <div :class="[prefixCls + '-content']">
<div :class="[prefixCls + '-arrow']"></div> <div :class="[prefixCls + '-arrow']"></div>
<div :class="[prefixCls + '-inner']" v-if="confirm"> <div :class="[prefixCls + '-inner']" v-if="confirm">

12
src/components/table/table.vue
View file

@ -37,7 +37,7 @@
</table> </table>
</div> </div>
<div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed"> <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> <div :class="fixedHeaderClasses" v-if="showHeader">
<table-head <table-head
fixed="left" fixed="left"
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
@ -59,7 +59,7 @@
</div> </div>
</div> </div>
<div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle" v-if="isRightFixed"> <div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle" v-if="isRightFixed">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> <div :class="fixedHeaderClasses" v-if="showHeader">
<table-head <table-head
fixed="right" fixed="right"
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
@ -216,6 +216,14 @@
} }
]; ];
}, },
fixedHeaderClasses () {
return [
`${prefixCls}-fixed-header`,
{
[`${prefixCls}-fixed-header-with-empty`]: !this.rebuildData.length
}
];
},
styles () { styles () {
let style = {}; let style = {};
if (this.height) { if (this.height) {

3
src/components/tooltip/tooltip.vue
View file

@ -10,7 +10,8 @@
v-show="!disabled && (visible || always)" v-show="!disabled && (visible || always)"
@mouseenter="handleShowPopper" @mouseenter="handleShowPopper"
@mouseleave="handleClosePopper" @mouseleave="handleClosePopper"
v-transfer-dom:forbidden="transfer"> :data-transfer="transfer"
v-transfer-dom>
<div :class="[prefixCls + '-content']"> <div :class="[prefixCls + '-content']">
<div :class="[prefixCls + '-arrow']"></div> <div :class="[prefixCls + '-arrow']"></div>
<div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div> <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>

12
src/directives/transfer-dom.js
View file

@ -15,8 +15,8 @@ function getTarget (node) {
} }
const directive = { const directive = {
inserted (el, { value, arg }, vnode) { inserted (el, { value }, vnode) {
if (arg.forbidden) return false; if (el.dataset.transfer !== 'true') return false;
el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom'; el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
const parentNode = el.parentNode; const parentNode = el.parentNode;
if (!parentNode) return; if (!parentNode) return;
@ -37,8 +37,8 @@ const directive = {
} }
} }
}, },
componentUpdated (el, { value, arg }) { componentUpdated (el, { value }) {
if (arg.forbidden) return false; if (el.dataset.transfer !== 'true') return false;
// need to make sure children are done updating (vs. `update`) // need to make sure children are done updating (vs. `update`)
const ref$1 = el.__transferDomData; const ref$1 = el.__transferDomData;
if (!ref$1) return; if (!ref$1) return;
@ -62,8 +62,8 @@ const directive = {
getTarget(value).appendChild(el); getTarget(value).appendChild(el);
} }
}, },
unbind (el, { arg } ) { unbind (el) {
if (arg.forbidden) return false; if (el.dataset.transfer !== 'true') return false;
el.className = el.className.replace('v-transfer-dom', ''); el.className = el.className.replace('v-transfer-dom', '');
const ref$1 = el.__transferDomData; const ref$1 = el.__transferDomData;
if (!ref$1) return; if (!ref$1) return;

10
src/styles/components/table.less
View file

@ -268,6 +268,16 @@
} }
&-fixed-header{ &-fixed-header{
overflow: hidden; overflow: hidden;
&-with-empty{
.@{table-prefix-cls}-hidden{
.@{table-prefix-cls}-sort{
display: none;
}
.@{table-prefix-cls}-cell span{
display: none;
}
}
}
} }
&-fixed-body{ &-fixed-body{
overflow: hidden; overflow: hidden;