如何使用 VueJS 将 Outlook 消息拖放到浏览器中

Question

我在一个项目中使用 vuejs，我遇到了一些我无法弄清楚的事情。我需要能够将 Outlook 消息拖放到浏览器中并从电子邮件中捕获详细信息（收件人、发件人、抄送、消息 body、主题、接收日期、header 中的消息 ID、 ETC）。我找到了另一个 post 指向这个 API :

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items

但是我不确定我能否将它与 VueJS 一起使用，或者我不确定我需要做什么才能使用它，因为 vuejs 使用虚拟 DOM。如果这甚至可行，任何建议都会很棒，代码示例会更好。

谢谢

Answer 1

使用您发送的 API 文档，我创建了一个示例。这里有密码笔！ https://codepen.io/timfranklin/pen/dyWVEbO?editors=1111

在示例中，您可以单击整个 Outlook 电子邮件并将其拖动到拖放区，这样就会插入所有电子邮件文本。您只需要对输入的电子邮件字符串进行一些处理。


const myVue = new Vue({
  el: "#app",
  data: {
    items: []
  },
  methods: {
    onDrop(ev){
      const emailData = ev.dataTransfer.getData('text')
      console.log(emailData)
      this.items.push(
        emailData
      )
    }
  }
})


function dragstart_handler(ev) {
 console.log("dragStart: target.id = " + ev.target.id);
 // Add this element's id to the drag payload so the drop handler will
 // know which element to add to its tree
 ev.dataTransfer.setData("text/plain", ev.target.id);
 ev.dataTransfer.effectAllowed = "all";
}

function drop_handler(ev) {
 console.log("drop: target.id = " + ev.target.id);
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 myVue.onDrop(ev)
}

function dragover_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "all"
}

如何使用 VueJS 将 Outlook 消息拖放到浏览器中

How to Drag and Drop Outlook Message into browser with VueJS

javascript

outlook

vue.js

vuejs2