禁止图片拖动

看到张鑫旭大佬的文章讲禁止图片拖动的，我看了看手头的项目，拖了拖一些 icon，拖动会有虚影。于是准备把图片的拖动禁用掉，第一反应是在 App 文件中等视图加载完毕，获取所有的图片，设置为不可拖动，一劳永逸

mounted() {
  this.$nextTick(() => {
    const imgs = document.querySelectorAll('img');
    imgs.forEach((el, i) => { imgs[i].draggable = false; });
  });
}

但是这么写就有点宁杀一千，不放过一个的感觉，假若以后的需求中某张图片可能需要这种效果呢？不这么写还有什么方法呢？想到 Vue 中有自定义指令，在图片元素中加入相应的自定义指令，实现图片的不可拖动

Vue.directive('undrag', {
  inserted(el) {
    el.draggable = false;
  }
});

写太多指令在 main 脚本中会不好管理，我们再把指令封装成插件，使用 use 来加载，这样比较好管理，也方便复用。

const ImgUndrag = (Vue) => {
  Vue.directive('undrag', {
    inserted(el) {
      el.draggable = false;
    }
  });
};

以上两种方法可以说是各有利弊吧，自定义指令需要在每张需要禁用拖动效果的图片中都写一遍，全局修改图片属性会使所有图片失去拖动效果，具体用哪种，可以根据自己的需求来。