mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
fix: draggable组件因为transform属性导致fixed定位失效
This commit is contained in:
wanchun
parent
b7352871ea
commit
60e70f9ea4
@ -3,14 +3,18 @@
|
||||
<h1>Draggable 拖拽</h1>
|
||||
<h2>概述</h2>
|
||||
<p>拖拽改变列表数据时使用, 处理数据顺序问题069</p>
|
||||
|
||||
|
||||
<h2>代码示例</h2>
|
||||
<Row class="panel">
|
||||
<Cell class="son-panel" span="12">
|
||||
<div class="panel-case">
|
||||
<Draggable v-model="list" @on-sort-ready="dragready" @on-sort-end="dragend" class="category-draggable">
|
||||
<Draggable v-model="list" :disabled="disabled" @on-sort-ready="dragready" @on-sort-end="dragend" class="category-draggable">
|
||||
<template slot-scope="{item, index}">
|
||||
<p>{{item.content}}</p>
|
||||
<Row>
|
||||
<Cell span="6"><Wb-input /> </Cell>
|
||||
<Cell span="6"><p>{{item.content}}</p></Cell>
|
||||
</Row>
|
||||
|
||||
</template>
|
||||
</Draggable>
|
||||
</div>
|
||||
@ -30,7 +34,7 @@
|
||||
</div>
|
||||
</Cell>
|
||||
</Row>
|
||||
|
||||
|
||||
<h2>API</h2>
|
||||
<h3>Draggable props</h3>
|
||||
<markdown2></markdown2>
|
||||
@ -89,11 +93,19 @@ export default {
|
||||
ready: function () {
|
||||
},
|
||||
methods: {
|
||||
mouseover(){
|
||||
console.log("mouseover")
|
||||
this.disabled = true
|
||||
},
|
||||
mouseout(){
|
||||
console.log("mouseout")
|
||||
this.disabled = false
|
||||
},
|
||||
dragready() {
|
||||
console.log(this.disabled)
|
||||
// console.log(this.disabled)
|
||||
},
|
||||
dragend() {
|
||||
console.log('end')
|
||||
// console.log('end')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -105,6 +117,6 @@ export default {
|
||||
.draggable-page .son-panel .example-item{
|
||||
padding: 10px 40px;
|
||||
border: 1px solid #eee;
|
||||
margin: 0 0 20px 0;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -115,6 +115,15 @@
|
||||
<Wb-button type="primary" @click="open3">
|
||||
增加高度
|
||||
</Wb-button>
|
||||
<Draggable v-model="list" class="category-draggable">
|
||||
<template slot-scope="{item, index}">
|
||||
<Row>
|
||||
<Cell span="6"><Wb-input /> </Cell>
|
||||
<Cell span="6"><p>{{item.content}}</p></Cell>
|
||||
</Row>
|
||||
|
||||
</template>
|
||||
</Draggable>
|
||||
<div v-for="i in len" :key="i" style="height:300px;">
|
||||
我是内容，我是内容
|
||||
</div>
|
||||
@ -295,7 +304,21 @@ export default {
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
len: 1
|
||||
len: 1,
|
||||
list: [
|
||||
{
|
||||
content: '序号一',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
content: '序号二',
|
||||
key: 2
|
||||
},
|
||||
{
|
||||
content: '序号三',
|
||||
key: 3
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<Column prop="age" name="年龄" sort />
|
||||
<Column prop="adr" name="地址" />
|
||||
<Column prop="status" name="等级" />
|
||||
<Column name="状态" :component="component1"/>
|
||||
<Column name="操作" :action="action" />
|
||||
</Wb-table>
|
||||
<Wb-button class="mt20" @click="getSelectedTr">获取选择的行</Wb-button>
|
||||
@ -229,26 +230,30 @@ export default {
|
||||
age: 24,
|
||||
date: new Date(2016, 9, 10),
|
||||
adr: '北京市海淀区西一旗',
|
||||
status: 1
|
||||
status: 1,
|
||||
open: true
|
||||
}, {
|
||||
_selected: true,
|
||||
name: '李晓红',
|
||||
age: 26,
|
||||
date: new Date(2016, 9, 11),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 2
|
||||
status: 2,
|
||||
open: true
|
||||
}, {
|
||||
name: '隔壁老王',
|
||||
age: 22,
|
||||
date: new Date(2016, 9, 12),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 3
|
||||
status: 3,
|
||||
open: true
|
||||
}, {
|
||||
name: '我爸是李刚',
|
||||
age: 19,
|
||||
date: new Date(2016, 9, 13),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 4
|
||||
status: 4,
|
||||
open: true
|
||||
}],
|
||||
data3: [],
|
||||
action: [{
|
||||
@ -295,6 +300,45 @@ export default {
|
||||
// template: "<Wb-Input :value='tdData' readonly>{{tdData}}</Wb-Input>"
|
||||
})
|
||||
},
|
||||
component1: function (trData, tdData) {
|
||||
return new Vue({
|
||||
data: function () {
|
||||
return {
|
||||
trData,
|
||||
tdData
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm(){
|
||||
return new Promise((resolve, reject)=>{
|
||||
this.$Message({
|
||||
title: '标题', // 可以传入文本和domString
|
||||
template: '是否啊啊啊啊啊？', // 可以传入文本和domString
|
||||
buttons: [{ // 最多有两个, 第一条配置第一个button
|
||||
text: '确定',
|
||||
class: 'xx'
|
||||
}, { // 配置第二个button
|
||||
text: '放弃',
|
||||
class: 'yy'
|
||||
}]
|
||||
}).then(function (index) {
|
||||
if (index == 0) {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
render(h){
|
||||
return h("Wb-switch", {
|
||||
props: {
|
||||
value: this.trData.open,
|
||||
confirm: this.confirm
|
||||
}
|
||||
}, [this.tdData])
|
||||
}
|
||||
})
|
||||
},
|
||||
trClass() {
|
||||
console.log(arguments)
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@webank/fes-ui",
|
||||
"version": "0.4.8",
|
||||
"version": "0.4.9",
|
||||
"description": "基于Vue2.0，适用于PC管理端的组件库",
|
||||
"main": "dist/fes-ui.js",
|
||||
"scripts": {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="draggable-container">
|
||||
<div class="draggable-container" style="position: relative;">
|
||||
<DraggableItem v-for="(item, index) in value" :key="index" :index="index" :item="item">
|
||||
<slot :item="item" :index="index" />
|
||||
</DraggableItem>
|
||||
@ -77,6 +77,7 @@ export default {
|
||||
handlePress() {
|
||||
const nodes = this.manager.getOrderedRefs(this.collection);
|
||||
this.activeIndex = nodes.findIndex(node => node === this.activeNode);
|
||||
this.containerRect = this.container.getBoundingClientRect();
|
||||
this.nodeRect = this.activeNode.getBoundingClientRect();
|
||||
this.width = this.nodeRect.width;
|
||||
this.height = this.nodeRect.height;
|
||||
@ -197,9 +198,9 @@ export default {
|
||||
},
|
||||
initHelper(cloneNode) {
|
||||
this.helper = this.container.appendChild(cloneNode);
|
||||
this.helper.style.position = 'fixed';
|
||||
this.helper.style.top = `${this.nodeRect.top}px`;
|
||||
this.helper.style.left = `${this.nodeRect.left}px`;
|
||||
this.helper.style.position = 'absolute';
|
||||
this.helper.style.top = `${this.nodeRect.top - this.containerRect.top}px`;
|
||||
this.helper.style.left = `${this.nodeRect.left - this.containerRect.left}px`;
|
||||
this.helper.style.width = `${this.width}px`;
|
||||
this.helper.style.height = `${this.height}px`;
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user