Question

我需要将额外的参数传递给“v-on：enter”钩子：

<transition v-on:enter="stretch($event,done?,{opacity:1,width:'400px')"></transition>

...在我的Vue中

methods:{
stretch: function (properties,el,done) {
    var delay = el.dataset.index * 150
    setTimeout(function () {
      Velocity(
        el,
        properties,
        { complete: done }
        )
    }, delay)
  },

它不起作用，因为我不知道如何明确传递完成回调（这是钩子输入时必须的）

什么在起作用但不可重复使用：

<transition v-on:enter="stretch"></transition> ...

methods:{
stretch: function (el,done) {
    var delay = el.dataset.index * 150
    setTimeout(function () {
      Velocity(
        el,
        { opacity: 1, width: 400px },
        { complete: done }
        )
    }, delay)
  },

文档中的链接：https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

任何人都可以帮助我吗？提前谢谢。

Answer 1

根据documentation Vue.js v2转换挂钩输入只接受两个参数，即：

元素
完成回拨

另外

使用仅限JavaScript的转换时，输入和保留挂钩需要完成回调。否则，它们将被同步调用，转换将立即完成。

所以你不能按照你尝试过的方式传递任何其他参数。但是你可以使用 v-bind 。在这种情况下，您的示例将是这样的

HTML

<transition v-on:enter="stretch" v-bind="styles={opacity:1,width:'400px'}"></transition>

和js

data : {
...
  styles: {}
},
methods: {
...
  stretch: function (el,done) {
    var delay = el.dataset.index * 150;
    setTimeout(function () {
      Velocity(
        el,
        this.styles,
        { complete: done }
        )
    }, delay);
  },

Answer 2

解决方案：

<transition v-on:enter="stretch(arguments, {opacity:1,width:'400px'})">`</transition>

methods: {
  stretch(args, properties) {
    // args[0] === el
    // args[1] === done()
  }
}

希望它会服务。

Vuejs过渡v-on：输入。什么是“完成”回调？

2 个答案: