看到张鑫旭大佬的文章讲禁止图片拖动的,我看了看手头的项目,拖了拖一些 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;
}
});
};

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