给富文本内容中的图片添加一个与App端交互事件

212 阅读1分钟

从服务器中取到由富文本编辑器编辑上传的内容,对其中的所有的图片添加一个与APP端的交互事件

  • 用到的重点是通过e.target.nodeName来匹配是不是img标签
<template>

    <div class="article-content" v-html="detail.content" @click.stop="showImage"></div>

</template>

<script>

    export default {
        data() {
            return {
                
            }
        },
        
        methods: {
            showImage(e) {
		const ua = navigator.userAgent
		const isIOS = /iPhone/i.test(ua)
		const isAndroid = /Android/i.test(ua)
		console.log(e.target.nodeName, e.target.src.split(".com/")[1])

		if(e.target.nodeName.toLowerCase() === 'img') {
                    const options = {
                        img: e.target.src.split(".com/")[1]
                    }

                    if (isAndroid) {
                        window.Android.ArticalBigPic(JSON.stringify(options))
                    } else {
                        window.webkit.messageHandlers.ArticalBigPic.postMessage(options)
                    }
	        }
	    }
        }
    }

</script>