在components文件夹下新建backIndex.vue文件
<template> <div class="backIndex" @click="goHome"> <img src="../assets/backHome.png" alt="回到首页"> </div> </template> <script> export default { name: "backIndex", data() { return {} }, methods: { // 跳转到首页的方法 goHome() { // 首页的路由地址 this.$router.push(`/index`) } } } </script> <style scoped> .backIndex { position: fixed; bottom: 120px; right: 25px; width: 80px; height: 80px; display: flex; border-radius: 50%; box-shadow: 0px 0px 0px 1px rgb(196,200,204); flex-direction: column; justify-content: center; align-items: center; z-index: 99999; } .backIndex > img { width: 50px; height: 50px; position: absolute; opacity:0.7; /* 设置图片透明度 */ filter:alpha(opacity=70); /* 针对 IE8 以及更早的版本 */ } </style>引入并使用：
<template> <div class='test'> <backHome></backHome > </div> </template> <script> import backHome from "@/components/backIndex.vue"; export default { name: "test", components: { backHome: backHome, }, data() { return {}; }, }; </script> <style scoped> .test{ width: 100%; height: 100%; } </style>
