The function of the vue3 mouse is realized through the display button

In front-end development, we often need to add some interactive effects to the page to improve the user experience. One of the common needs is that when the mouse passes through an element, this button can be used to trigger some operations or display more content.

In this article, I will introduce how to use Vue3 to achieve the effect of a mouse passing through the displayed button, and it will also involve some basic usage and features of Vue3. Let's get started!

Create a Vue3 project

First, we need to create a Vue3 project. You can use the Vue CLI to quickly create a Vue3 project. The specific steps are as follows:

Install the Vue CLI:

npm install -g @vue/cli

Create a new Vue3 project:

vue create vue-mouseover-button

Select the default configuration option and wait for the project creation to complete.

Add the function of displaying the mouse button

Next, we need to add the function of the mouse to display the button in the Vue3 project. The specific steps are as follows:

existsrc/componentsCreate a new component file in the directory, and add the following code:

<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 = () => {
       = true
    }
    const hideButton = () => {
       = 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>

In this component, we use@mouseoverand@mouseleaveEvents to listen for mouse movement in and out events. When the mouse is moved in, we willshowThe value of   is set totrue, thus displaying the button; when the mouse is moved out, we willshowThe value of   is set tofalse, thus hiding the button.

Note that we aresetupThe new feature of Vue3 - Composition API is used in the function. passrefFunctions to create responsive data, so thatshowWhen the value of  changes, the component will automatically update the view.

existUse in the fileMouseoverButtonComponents and add some content:

<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/'
export default {
  name: 'App',
  components: {
    MouseoverButton
  }
}
</script>
<style>
.app {
  text-align: center;
  margin-top: 100px;
}
</style>

In this component, we useMouseoverButtonComponents and some content was added to it. When the mouse moves into this component, a button will be displayed, and the user can click this button to trigger some operations.

Note, we used it hereimportandexportSyntax to import and export components. This is the syntax in ES6, and Vue3 uses ES6 modularity by default. In addition, we usednameAttributes to name the component.

Run the project

Now, we have completed the function of the mouse passing through the display button, and we can run the project to view the effect. Execute the following command in the terminal:

npm run serve

Then visit in the browser

http://localhost:8080, you can see the http://localhost:8080/ created by us 

Vue3 is applied. When the mouse moves into the pageMouseoverButtonWhen the component is used, a button will be displayed, and the user can click this button to trigger some operations.

Summarize

This article introduces how to use Vue3 to achieve the effect of a mouse passing through the displayed button. We used Vue3's Composition API to create responsive data and used@mouseoverand@mouseleaveEvents to listen for mouse movement in and out events. Through this example, we can learn some basic usage and features of Vue3. Hope this article will help you!

This is the end of this article about the implementation of the display button function of the vue3 mouse. For more related content of the vue3 display button, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!