为vue中的每个标签添加属性答案

【问题标题】：Add attribute to every tag in vue为vue中的每个标签添加属性
【发布时间】：2019-09-19 12:45:21
【问题描述】：

我有一个 vue 项目，模板中有很多 <img 标签。有很多带有更多图像的组件。现在我想为他们全部禁用拖动。

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

我想知道我是否可以在一个地方做到这一点，比如在全局 mixin 中。

【问题讨论】：

这是其中之一，“伙计……我希望我能为此制作一个组件！”时刻。
@Ohgodwhy 我从没想过我需要为<img 标签制作一个组件，是吗？但我想这就是我解决这个问题的方法。
我绝对会为此使用一个组件，这样您就可以轻松地进行大量的全局修改。或者添加/切换新的属性/标志。
img {pointer-events: none;} 应该可以解决问题。随意更改选择器以符合您的要求。一个 JS 替代方法是在 dragstart 上添加一个事件侦听器并在其上调用 .preventDefault()。请向我们展示您尝试了什么，并添加指向任何让您相信它应该有效的文档的链接。

标签： vue.js vuejs2 vue-component vue-mixin

【解决方案1】：

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

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

【讨论】：

【解决方案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

【讨论】：

你把它放在哪里？在全局混合中？那么updated 是合适的位置，因为可以使用if 渲染图像。每次更新都查询文档不是解决方案
你能放一点渲染图像的代码吗？
<template><div><img v-if="a" /></div>, <script> setTimeout(() => a = true, 100)</script>
你为什么不把 draggable="false" 添加到模板
因为我每个都有 100 个模板和 100 个图像？