时间戳

首页 > 解决方案 > 鼠标悬停功能不会切换

vue.js - 鼠标悬停功能不会切换

问题描述

我正在尝试更改悬停时的悬停值，但是每当我将鼠标悬停在 flex 元素上时它似乎都不起作用，我做错了什么？

html

template(#default="{ toggle, toggled, hover }")
  .flex(@click="toggle" @mouseover="hover = !hover" )

    box-icon(type="solid" name="chevron-down" v-if="hover")

零件

<template lang="pug">
slot(:toggled="toggled" :toggle="toggle" :hover="hover")
</template>

<script>
  import { ref } from 'vue'
    export default {
    setup() {
      const toggled = ref(false)
      const hover = ref(false)
      function toggle() {
        toggled.value = !toggled.value
      }
      
      return { toggled, toggle, hover }
    }
  }
</script>

标签： vue.jsvuejs3

解决方案

@mouseover 不是 vuejs 中的事件。
您将不得不使用@mouseenter和@mouseleave。

此外，您似乎无法编辑 ref 值，您必须在模板中创建一个函数来更改该值。这是我现在无法解释的事情。尽管如此，我还是让它发挥了作用。

这是一个工作示例：

// Test.vue component
<script setup>
  const toggled = ref(false)
  const hovered = ref(false)
  const hover = (value) => hovered.value = value
  const toggle = () => toggled.value = ! toggled.value
</script>

<template>
  <slot :toggled="toggled" :toggle="toggle" :hovered="hovered" :hover="hover" />
</template>

<Test>
  <template #default="{toggle, toggled, hover, hovered}">
    <button @click="toggle" @mouseenter="hover(true)" @mouseleave="hover(false)">
      <p>Toggled : {{ toggled }}</p>
      <p>Hovered : {{ hovered }}</p>
    </button>
  </template>
</Test>

推荐阅读