Question

我有vuejs组件来显示图像块。

这是我的html，调用组件的次数为4次：

<div id="activities" class="row text-center justify-content-center activities">
    <zpeakimage type="art" text="{{ art_text }}" img="{{asset('images/art.png')}}" target="/list/art"></zpeakimage>
    <zpeakimage type="run" text="{{ run_text }}" img="{{asset('images/run.png')}}" target="/list/run"></zpeakimage>
    <zpeakimage type="eat" text="{{ eat_text }}" img="{{asset('images/eat.png')}}" target="/list/eat"></zpeakimage>
    <zpeakimage type="party" text="{{ party_text }}" img="{{asset('images/party.png')}}" target="/list/party"></zpeakimage>
</div>

我的vue-zpeakimage.js：

Vue.component('zpeakimage', {
  delimiters: ['${', '}'],
  props: ['type', 'text', 'img', 'target'],
  template: '<div class="col-3" style="padding-top: 20px;"><h3><a @mouseover="imgBounce(type)" :title="text" :href="target"><span> <img style="width:220px;" :id="type" :src="img" :alt="text"> </span></a></h3><span> ${text} </span></div>',
  methods: {
    imgBounce: function doBounce(Id) {
        $('#'+Id).effect('bounce', {times: 3}, 500);
    }
  }
});

new Vue({
  el: '#activities'
});

img on mouseover反弹，但我想在鼠标结束时无限制地上下动画..

Answer 1

所以你想要一个图像在鼠标悬停在它上面之后永远反弹。你想用jQuery ui进行反弹。

https://jsfiddle.net/50wL7mdz/273936/

<div id="activities" class="row text-center justify-content-center activities">
    <zpeakimage type="art" text="art_text" :img="asset('images/art.png')" target="/list/art"></zpeakimage>
    <zpeakimage type="run" text="run_text" :img="asset('images/run.png')" target="/list/run"></zpeakimage>
    <zpeakimage type="eat" text="eat_text" :img="asset('images/eat.png')" target="/list/eat"></zpeakimage>
    <zpeakimage type="party" text="party_text" :img="asset('images/party.png')" target="/list/party"></zpeakimage>
</div>

Vue.component('zpeakimage', {
  delimiters: ['${', '}'],
  props: ['type', 'text', 'img', 'target'],
  template: '<div class="col-3" style="padding-top: 20px;"><h3><a @mouseover="imgBounce" :title="text" :href="target"><span> <img style="width:220px;" :id="type" ref="id" :src="img" :alt="text"> </span></a></h3><span> ${text} </span></div>',
  data () {
  return {interval: null}
  },
  methods: {
    imgBounce: function () {
    if (this.interval) return
    var self = this
    this.interval = setInterval(function() {
        $(self.$refs.id).effect('bounce', {times: 3}, 500);
    } ,1000)
    }
  },
  destroyed: function() {
    if (this.interval)
        clearInterval(this.interval)
  }
})

new Vue({
  el: '#activities'
});

vuejs组件中的无限弹跳方法

1 个答案: