vue3鼠标经过显示按钮功能的实现

npm install -g @vue/cli

vue create vue-mouseover-button

<template>
  <div class="mouseover-button" @mouseover="showButton" @mouseleave="hideButton">
    <div class="content">
      <slot></slot>
    </div>
    <button class="button" v-show="show">Click me!</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup(props, { emit }) {
    const show = ref(false)
    const showButton = () => {
      show.value = true
    }
    const hideButton = () => {
      show.value = false
    }
    return {
      show,
      showButton,
      hideButton
    }
  }
}
</script>
<style scoped>
.mouseover-button {
  position: relative;
  display: inline-block;
}
.content {
  display: inline-block;
}
.button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

<template>
  <div class="app">
    <MouseoverButton>
      <h1>Hello, Vue3!</h1>
      <p>Move your mouse over me to see the button.</p>
    </MouseoverButton>
  </div>
</template>
<script>
import MouseoverButton from './components/MouseoverButton.vue'
export default {
  name: 'App',
  components: {
    MouseoverButton
  }
}
</script>
<style>
.app {
  text-align: center;
  margin-top: 100px;
}
</style>

npm run serve