在 Vuejs 中通过点击事件停止动画？

Question

我有一个 MainMenuItem，里面有一堆静态标题。有一个用于新闻和事件的可变项目，上面有一个水平的自动收报机和滚动动画。此动画发生在 MainMenuItem 组件内部，但单击事件将从 parent 发生。点击事件目前需要停止动画和改变字体粗细（可以在readLink class中看到）。

Wth Vue 我不能用 @click="itemType = ''".

之类的东西来改变道具类型本身

那么如何在点击时关闭这个自动收报机动画？

基本上，我需要做的就是制作 MainMenuItem 的 itemType = '' 并使其与其他所有项目相同。我需要制作数据类型吗？或向 child/base 组件发送事件的点击事件 MainMenuItem?

如果还有需要的代码，请告诉我！

干杯！

MainMenuItem.vue（带有自动收报机动画的基本组件）

<template>
  <q-btn align="left" dense flat class="main-menu-item" v-on="$listeners">
    <div class="flex no-wrap items-center full-width">
      <iconz v-if="iconz" :name="iconz" type="pop" color="black" class="mr-md" />
      <q-icon :name="menuIcon" />
      <div v-if="itemType === 'news'" class="_ticker">
        <div class="ellipsis _ticker-item">{{ title }}</div>
      </div>
      <div v-else>
        <div class="ellipsis">{{ title }}</div>
      </div>
      <q-icon name="keyboard_arrow_right" class="_right-side" />
    </div>
  </q-btn>
</template>

<style lang="sass" scoped>
// $
.main-menu-item
  display: block
  font-size: 15px
  position: relative
  width: 100%
  border-bottom: 1px solid #F5F5F5
  +py(10px)
  ._left-side
    color: #000000

._ticker
  font-weight: bold
  margin-left: 2em
  width: 83%
  white-space: nowrap
  overflow: hidden
  position: absolute
  &-item
    display: inline-block
    padding-left: 100%
    animation: ticker 8s linear infinite

@keyframes ticker
  to
    transform: translateX(-100%)
</style>

<script>
import { iconz } from 'vue-iconz'

export default {
  name: 'MainMenuItem',
  components: { iconz },
  props: {
    comingSoonShow: { type: Boolean, default: false },
    title: { type: String, default: 'menu' },
    subtitle: { type: String, default: '' },
    menuIcon: { type: String, default: '' },
    iconz: { type: String, default: '' },
    itemType: { type: String, default: '' },
  }
}
</script>

MainMenu.vue（就是我使用基本组件的位置）

<template>
  <MainMenuItem
   v-for="news in newsList"
   :key="news.id"
   @click="openNews(news)"
   :title="news.title"
   itemType="news"
   :class="{ readLink: readNewsList[news.id] }"
   menuIcon="contactless"
  ></MainMenuItem>
</template>

export default {
  name: 'MainMenu',
  methods: {
    openNews(postInfo) {
      dbAuthUser().merge({ seenNewsPosts: { [postInfo.id]: true } })
      Browser.open({ url: postInfo.url, presentationStyle: 'popover' })
    }
  },

  computed: {
    readNewsList() {
      return this.authUserInfo?.seenNewsPosts || {}
    },
  }

<style lang="sass" scoped>
  .readLink
    font-weight: 500
</style>

Answer 1

因为它是一个道具，最简单的方法是发出一个事件来执行您在 parent 中需要的东西，并绑定一个变量而不是静态道具以便能够更改它。 child 中的示例：

<button @click="onClickButton">stop animation </button>

export default {
  methods: {
    onClickButton (event) {
      this.$emit('stopAnimation')
    }
  }
}

在 parent 中，您可以这样听：

<MainMenuItem
   v-for="news in newsList"
   :key="news.id"
   @click="openNews(news)"
   :title="news.title"
   :itemType="itemType"
   :class="{ readLink: readNewsList[news.id] }"
   menuIcon="contactless"
v-on:stopAnimation="itemType = ''"
  ></MainMenuItem>

export default {
  data() {
        return {
            itemType: "news",
        }
    }
  }
}

在 Vuejs 中通过点击事件停止动画？

Stopping an animation with an click event in Vuejs?

sass

css-animations

vue.js