Vuejs如何将点击功能设置为语义UI的关闭功能？

Question

我如何调用semanticUI 的函数来关闭和淡出图标点击的消息？

https://semantic-ui.com/collections/message.html#dismissable-block有一个 jQuery 调用（？），但我不知道如何在 vue 中进行类似的事情。有人可以解释一下它在做什么吗？我知道你正在传递一个函数来完成点击但是函数中的 $('.message .close') 和 $(this) 是什么？

<i class="close icon" @click=???? >

$('.message .close')

  .on('click', function() {

    $(this)

      .closest('.message')

      .transition('fade')

    ;

  })

;

Answer 1

我真的应该在发布之前查看文档。感谢您解决问题，我对 css 类与函数调用之间的区别感到困惑。使用转换包装器和 v-if 完成了这项工作。https://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components

Answer 2

$('.message .close') 是一个 jQuery 类选择器，它将从您的 html 元素中选择 .message 和 .close 类 $(this) 将是它找到的 dom 元素，您可以使用此代码，包括在您的html 以及 jQuery 的 CDN。