hcg1023 / vue3-dnd

React Dnd implementation in Vue Composition-api.
https://www.vue3-dnd.com
MIT License
643 stars 52 forks source link

有一个1px 像素白边,请问如何去除? #22

Closed whatoeat2night closed 2 years ago

whatoeat2night commented 2 years ago
Screen Shot 2022-06-17 at 3 11 16 PM Screen Shot 2022-06-17 at 3 10 56 PM
whatoeat2night commented 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>
whatoeat2night commented 2 years ago
<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;
    }
  }
}
whatoeat2night commented 2 years ago

我试了好多解决办法,始终没有办法消除这个1px的白边, 我看demo里面,有一些是没有白边,有一些是有的。希望大佬帮帮忙,另外能告诉我怎么去调试拖拽的preivew element 的style吗?

hcg1023 commented 2 years ago

你现在是在用dragPreview渲染preview element?还是用了dragLayer?又或者两者都没有用?像素白边可能是css样式造成的?最好给一个复现的git仓库地址,或者指出我们存在问题的示例