移动端图片标签的长按保存怎么移除

Web开发中，在移动设备的浏览器上存在一些差异，最近遇到一个问题：网页中放置了一些img标签用于展示图片内容，但是需求方又希望这些图片仅供查看，不可被下图这种方式下载下来。

经过了解后得出：对img标签使用        pointer-events: none;        属性即可实现这个效果，但是使用这个效果的同时会移除掉img的点击事件，让图片无法被选中。

为了快速的解决完这个问题，于是做了一个组件用于替代img标签：

<template>
    <div v-bind="$attrs">
      <img :src="src" :alt="alt">
    </div>
</template>
  
<script lang="ts" setup>
  defineProps(["src", "alt"]);
</script>
  
<style lang="scss" scoped>
  /* 可以添加一些样式 */
  div {
    /* 可以添加一些样式 */
    img{
        pointer-events: none;
        width: 100%;
        height: 100%;
    }
  }
</style>
  

为了让他像img标签一样可以快捷使用，还在main.ts中全局注册了这个组件：

import { createApp } from 'vue'
import App from './App.vue'
import PictureCom from '@/components/common/PictureCom.vue'
const app = createApp(App)
app.component('pictureCom', PictureCom)
app.mount('#app')

最后在需要用到img标签的地方将img替换成这个组件就行了！

 <pictureCom @click="onClick" class="img" src="/image.png" alt=""/>