vue2拖拽组件到容器需要预览效果

需求就是这样的哈 拖拽的时候需要有一个预览效果

我们这里使用css的变量来控制

    // 拖拽时的样式
    .dragClass {
      background-image: var(--background-image) !important;
      width: 259.493px !important;
      height: 212px !important;
      color: transparent !important;
      background-size: 100% 100% !important;
    }

拖拽的事件:拖拽时动态修改变量值

    //开始拖拽事件
    onStart(e) {
      document.querySelector("body").style.cursor= "grabbing"
      this.draggableStart();
      document.body.style.setProperty(
        "--background-image",
        `url(${this.visualCom[e.oldIndex].img})`
      );
    },

这个img的值用img: require("../img/sbhclfx.png"),即可

每个组件应该有自己的img像这样

  {
    titleName: "设备耗材率分析",
    img: require("../img/sbhclfx.png"),
    is: "equipmentConsumption",
    id: nanoid(),
    moduleId: 11,
  },
  {
    titleName: "人员统计",
    img: require("../img/rytj.png"),
    is: "personnelStatistics",
    id: nanoid(),
    moduleId: 14,
  },
  {
    titleName: "设备统计",
    img: require("../img/sbtj.png"),
    is: "deviceStatistics",
    id: nanoid(),
    moduleId: 15,
  },

使用require导入图片后面发现部署到线上环境拖拽时图片显示不出来... 后面改成base64了！！！