使用环境vue2 + eleme + vue-smooth-dnd 拖拽组件

基本功能为

1.点击按钮 显示 el-dialog(eleme 弹出框)

2.el-dialog 中有一个拖拽组件

3.只要我在 顶层div 中设置 css margin;padding;width 中 任何一个css值,拖拽组件就会报错

注意看第一行,特别奇怪,找了几个小时才发现 

<template>
  <!-- 顶层div 不能设置css值,使用class 设置也不行 设置后就会报错,具体原因不知道 -->
  <div style="margin: 10px;padding: 10px;">
    <!-- 这里设置 margin: 10px; 也会触发这个bug 完全无法理解为什么   -->
    <div class='top' style="width: 290px;height: 20px;margin: 10px;">
      <i class="el-icon-setting" @click="show = true"></i>
    </div>
    <!--  资讯展现部分  -->

    <el-dialog :visible.sync="show" width="320px" :modal="false" >
      <Container @drop="onDrop" orientation="vertical" >
        <Draggable v-for="(item,i) in news_left_order" :key="'Dropleft_news_' + i">
          <div class="types" :key="'Dropleft_news_div_' + i">
            拖拽拖拽拖拽拖拽拖拽拖拽{
   
   {item}}
          </div>
        </Draggable>
      </Container>
    </el-dialog>

  </div>
</template>

<script>
import Vue from 'vue'
import {Container, Draggable} from 'vue-smooth-dnd' //拖拽 需要使用 components注册
Vue.component('Container', Container)
Vue.component('Draggable', Draggable)
//Vue._init
export default {
  name: 'LeftNews',
  data() {
    return {
      //index_data 数据是从 首页ajax 统一获取的,这里的字段必须是 ajax返回中含有的
      show: false,
      news_left_order:[1,2,3,4,5]
    }
  },
  methods: {
    onDrop(dropResult) {
    }
  }
}
</script>