vue中 可编辑div 图片在谷歌浏览器里面如何能实现单击选中
火狐浏览器可以单击选中图片谷歌不能单击选中图片
用range对象选中图片,示例如下
<div id="app">
<div contenteditable="true" style="border:solid 1px #ccc;height:200px;width:400px;outline:none" v-on:click="selectImg">
aa <img src="https://avatar.csdnimg.cn/D/4/8/2_technologist_40_1621503911.jpg" />bb
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
selectImg(e) {
var el = e.target
if (el.tagName == 'IMG') {
var r = document.createRange();
var s = window.getSelection();
s.removeAllRanges();
r.selectNode(el);
s.addRange(r);
}
}
}
})
</script>