Closed whatoeat2night closed 2 years ago
<template>
<div :ref="drag" class="drag-wrapper" :class="{ ghost: isDragging }">
<slot></slot>
</div>
</template>
<script lang="ts" setup>
import { useDrag } from 'vue3-dnd'
import { toRefs } from '@vueuse/core'
const props = defineProps({
name: { type: String, required: true },
})
const [collect, drag] = useDrag(() => ({
type: 'editor',
item: () => props,
collect: (monitor) => ({
isDragging: monitor.isDragging(),
handlerId: monitor.getHandlerId(),
}),
}))
const { isDragging } = toRefs(collect)
</script>
<style lang="scss" scoped>
.drag-wrapper {
cursor: move;
width: auto;
height: auto;
&.ghost {
opacity: 0.4;
}
}
</style>
<template>
<div :class="{ 'tree-root': true, 'is-preview': isPreview }">
<div class="node__header">
<span>Tree Root</span>
</div>
<div class="node__content">Content</div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
const props = defineProps({
name: { type: String, required: true },
isPreview: { type: Boolean, default: false },
})
onMounted(() => {
console.log('tree node', props)
})
</script>
<style scoped lang="scss">
@import './node.scss';
</style>
$node-color: #ffc54d;
.tree-root {
@include behavior-node($node-color);
}
@mixin behavior-node($header-color) {
// border-radius: $node-border-radius;
@extend .f-c;
.node__header {
// border-top-left-radius: $node-border-radius;
// border-top-right-radius: $node-border-radius;
height: 32px;
text-align: center;
font-size: $text-level-one;
background-color: $header-color;
color: white;
@extend .f-c-c-c;
}
.node__content {
flex-grow: 1;
padding: 10px;
background-color: white;
}
&.is-preview {
width: 100px;
height: 60px;
.node__header {
font-size: $text-level-three;
font-weight: normal;
}
.node__content {
font-size: $text-level-three;
}
}
}
我试了好多解决办法,始终没有办法消除这个1px的白边, 我看demo里面,有一些是没有白边,有一些是有的。希望大佬帮帮忙,另外能告诉我怎么去调试拖拽的preivew element 的style吗?
你现在是在用dragPreview渲染preview element?还是用了dragLayer?又或者两者都没有用?像素白边可能是css样式造成的?最好给一个复现的git仓库地址,或者指出我们存在问题的示例