Question

有没有办法在Vue实例中添加点击处理程序而无需在标记上书写？我正在通过ajax加载SVG，我想在其上使用Vue点击事件。

我的Vue文件如下所示：

<template>
    <div>
        <div class="map" v-html="map"></div>
    </div>
</template>

<script>
export default{
    data : function(){
        return {
            map : 'Loading'
        };
    },
    methods : {
        getMap : function(){
            var thisMap = this;
            axios.get('/img/world-map.svg').then(function (response) {
                thisMap.map = response.data;
                thisMap.loading = false;
            }).catch(function (error) {
                thisMap.loading = false;
                console.log(error);
            });
        },
    },
    mounted : function(){
        console.log('WorldMap mounted');
        this.getMap();
    }
}
</script>

问题是我正在将一个相当大的SVG直接加载到页面中。在一个完美的世界里，我会做这样的事情：

<template>
    <div>
        <div class="map" >
            <svg>
                <g @click="groupClicked" class="asia" id="asia" xmlns:svg="http://www.w3.org/2000/svg">
                  <path stroke="#FFFFFF" d="M715.817,47.266c-4.45,1.25-8.903,2.497-13.357,3.739c-1.074,0.327-8.403,1.757-5.678,3.204
    c-1.922,2.104-2.993,1.568-5.547,1.536c-1.547,1.333,0.981,1.22-0.558,2.421c-0.976,0.761-0.946,1.257-2.106,0.827
    c-0.368-0.136-2.223-0.261-1.543,0.759c2.082,1.3,0.231,3.046-1.466,4.011c-1.831-0.38-3.271-1.611-5.245-1.293
    c-1.229,0.196-2.104,0.763-3.176-0.205c-1.265-1.143,0.371-1.409,1.378-2.177c1.529-1.168,5.473-0.2,2.834-2.668
    c1.061-0.979,2.07-0.946,3.206-1.736c-0.297-0.416-0.649-0.773-1.067-1.068c1.047-1.075,1.679-3.036,3.497-2.725
    c1.441,0.249,2.046-1.318,3.182-2.137c1.121-0.811,2.4-1.266,3.771-1.402c1.656-0.165,3.271,0.134,4.347-1.427
    c0.921-1.334,1.921-1.218,3.468-0.757c1.687,0.504,2.808-0.159,4.442-0.698c2.313-0.118,4.489-0.946,6.812-1.068
    c1.043-1.941,2.354-2.07,4.375-2.331c0.653-0.085,6.433-0.678,4.774,1.792C721.041,46.198,718.024,46.605,715.817,47.266
    C711.364,48.516,718.356,46.505,715.817,47.266z"/>
                </g>
            </svg>
        </div>
    </div>
</template>

然而，我加载的SVG大约300kb，我不希望在每个页面加载时使用我的所有JavaScript。

欢迎任何评论或解决方案。

修改

因为问我实际上已经采用了这种方法，但这并不完美，但目前似乎还不错。

var vueBus = new Vue({});

$('body').on('click', 'svg g', function(){
    var name = $(this).attr('data-name');
    vueBus.$emit('svgGroupClicked', name);
});

然后在我的.vue文件中添加一个监听器

mounted() : function(){
    vueBus.$on('svgGroupClicked', function(){ ... });
}

Answer 1

您可以在GET请求成功后通过纯JavaScript添加点击事件：

axios.get('/img/world-map.svg').then(function (response) {
  thisMap.map = response.data;
  thisMap.addClickHandler();
  thisMap.loading = false;
})

您的addClickHandler方法看起来像这样：

methods: {
  addClickHandler: function() {
    var gEl = this.$el.getElementsByTagName('g')[0];
    gEl.addEventListener('click', function() {
      alert('I got clicked');
    });
  },
}

或者，如果您使用的是jQuery：

methods: {
  addClickHandler: function() {
    $(this.$el).find('g')[0].click(function() {
      alert('I got clicked');
    });
  },
}

Vue js添加点击事件而不使用v-on或@click

1 个答案: