Question

我的模板中有一个vue项目，其中包含很多<img标签。有很多具有更多图像的组件。现在，我要为所有这些对象禁用拖动。

首先想到的是为<img标签创建grep文件，并将draggable="false"添加到每个模板中的每个图像中。

我想知道是否可以在一个地方做到这一点，例如在全局mixin之类的东西中。

Answer 1

一种解决方案是在文档元素上为dragstart事件注册一个事件侦听器，并在目标为<img>的情况下阻止拖动操作：

document.addEventListener('dragstart', e => {
  if (e.target.tagName === 'IMG') {
    e.preventDefault()
  }
})

Answer 2

您可以在已安装的挂钩上尝试以下操作：

mounted(){
    this.$nextTick(()=>{
       let allimages = document.querySelectorAll("img");
       for (var i = 0;i < allimages.length; i++){
          allimages[i].setAttribute("draggable", "false");
        }
    })
} // end of mounted hook

将属性添加到vue中的每个标签

2 个答案: