Question

您无法收听<object> dom元素中的点击事件。

我希望能够收听事件。同样，如果元素具有<object>元素作为子元素（或后代），则事件也不起作用，即<a @click="whatever"><object...></object></a>

new Vue({
  el: "#app",
  data: {
  width: 200,
  },
  methods: {
  	shot: function(todo){
    	alert('hey')
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <object v-on:click="width+20" type="image/svg+xml" :width="width" data="https://dwglogo.com/wp-content/uploads/2017/09/Vue-logo-001.svg">
  <!--Fallback content would go here-->
  </object>
</div>

Answer 1

当我想保持svg图标的css样式时，我通过在图标顶部放置div进行了讨厌的解决方法。

<template>
<span :class="['icon d-inline-block align-middle', cls]" :style="`width:${width}; height:${height};`">
    <div v-on:click.stop="$emit('click', $event)" class="icon-mask" :style="`width:${width}; height:${height}; margin-bottom:-${height};`"></div>
    <object  type="image/svg+xml" :data="path" :alt="name" :width="width" :height="height" :viewBox="box">
        <img :src="path" :alt="name" :width="w + 'px'" :height="h + 'px'" />
    </object>
</span>

请，如果有人知道解决此问题的更好，更优雅的方法，请告诉我。

Vue事件在<object>类型的元素中不起作用

1 个答案: