Vue+element-ui实现网页右侧快捷导航栏 Vue实现全局右侧快捷菜单功能组件

Vue+element-ui实现网页右侧快捷导航栏 Vue实现全局右侧快捷菜单功能组件

可视区域没超过当前屏幕高度时候只显示三个菜单效果
在这里插入图片描述
可视区域超过当前屏幕高度时,显示可回到顶部菜单的,当然这个菜单显示条件可以自定义,根据需求设置
在这里插入图片描述

然后将这个整体功能创建为一个全局组件

代码如下:

<template>
  <div>
    <div class="backBlock">
      <div
        class="phoneNums"
        @mouseenter="showTooltipPhone"
        @mouseleave="hideTooltipPhone"
      >
        <img
          v-if

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/907741.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

苏州金龙新V系客车创新引领旅游出行未来

10月25日&#xff0c;为期三天的“2024第六届旅游出行大会”在风景秀丽的云南省丽江市落下帷幕。本次大会由中国旅游车船协会主办&#xff0c;全面展示了中国旅游出行行业最新发展动态和发展成就&#xff0c;为旅游行业带来全新发展动力。 在大会期间&#xff0c;备受瞩目的展车…

看门狗电路原理与应用

看门狗的原理与应用 看门狗基本原理 看门狗&#xff0c;英文简称为“Watchdog Timer ”或者“Watchdog”&#xff1b; 本质上就是一个定时器的作用&#xff0c;简单理解就是 MCU发出一个周期性的信号&#xff0c;这个信号是满足看门狗芯片内部计时器的时间限制&#xff0c;则…

Caché/IRIS file2Xml 一个将文件转换成Studio导出的xml格式的工具

file2Xml 一个将文件转换成Studio导出的xml格式的工具 通过此工具可以将本地文件转换成xml格式文件&#xff0c;然后通过Studio导入到服务器中&#xff0c;而不再需要其他工具将文件传至服务器。 下面以为ensemble2016自带的一个示例界面增加背景图为例。 http://localhos…

java项目之教师工作量管理系统源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的教师工作量管理系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 教师工作量管理系统的…

外贸平台开发多语言处理的三种方式

随着全球贸易的不断增长&#xff0c;外贸平台的多语言处理已成为提升用户体验和市场竞争力的重要因素。在开发外贸平台时&#xff0c;有多种方法可以实现多语言支持。本文将探讨三种主要的多语言处理方式&#xff1a;数据库级多语言支持、前端国际化框架以及内容管理系统&#…

《Python网络安全项目实战》项目2 Python基础练习_总复习(1)

《Python网络安全项目实战》项目2 Python基础练习 总复习&#xff08;1&#xff09; 班级&#xff1a; 姓名&#xff1a; 实训成绩&#xff1a; 任务单成绩 &#xff1a; 输入用户名密码并将其输出打印。 userName _____________________ passWord ______________________ #输…

Linux——Ubuntu环境C编程

配置vim编辑器 设置一个tab键为4个空格 打开/etc/vim/vimrc文件&#xff0c;此文件为只读&#xff0c;所以要用sudo访问boot权限&#xff1a; set ts4&#xff08;设置一个tab键为4空格&#xff09; set nu&#xff08;vim编辑器下显示行号&#xff09; gcc编译器 gcc命令…

Java毕业设计-基于微信小程序的校园二手物品交易系统的实现(V2.0)

博主介绍&#xff1a;✌stormjun、8年大厂程序员经历。全网粉丝15w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&…

WPF+MVVM案例实战(十九)- 自定义字体图标按钮的封装与实现(EF类)

文章目录 1、案例效果1、按钮分类2、E类按钮功能实现与封装1.文件创建与代码实现2、样式引用与封装 3、F类按钮功能实现与封装1、文件创建与代码实现2、样式引用与封装 3、按钮案例演示1、页面实现与文件创建2、运行效果如下 4、源代码获取 1、案例效果 1、按钮分类 在WPF开发…

各地级市能源消耗量数据-基于灯光数据的反演(2000-2022年)

今天带来的数据是的全国各省市能源消耗量数据&#xff0c;省级的能源消耗量数据可以在统计年鉴之中查到&#xff0c;但市级的数据却暂无统计。但今天我们基于一篇论文提供的思路&#xff0c;通过夜间灯光与省级能源消耗量对更小尺度的地区能源消耗量进行反算。原文提供1995-200…

告别登录,这款插件直接复制CSDN内容,真棒!

前言 我们在开发过程中&#xff0c;肯定会遇到这样或者那样的问题&#xff0c;这时候&#xff0c;我们想到最多的就是用搜索引擎去搜索各种资料&#xff0c;查看各种博客。以前&#xff0c;查看博客是很方便的&#xff0c;不过后来&#xff0c;像CSDN的&#xff0c;就是必须要…

ssm《数据库系统原理》课程平台的设计与实现+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码看文章最下面 需要定制看文章最下面 目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容…

Altium Designer使用技巧(三)

PCB规则 1、间距规则 间距一般>6mil。 2、线宽规则 线宽规则>6mil,一般10mil&#xff1b; 电源线宽>15mil,般20mil; 3、过孔规则。 一般孔与盘的关系&#xff0c;盘是孔的2倍。 比如孔是12mil,盘是24mil。 如果过孔没按规则的话&#xff0c;点右上角设置或DP&…

[自动化测试:实践02-01]:Selenium整合Autoit:自动调用百度识图

前置准备 https://blog.csdn.net/Abraxs/article/details/142905693 [自动化测试&#xff1a;WebDriver]&#xff1a;AutoIt安装 https://blog.csdn.net/Abraxs/article/details/142931813 [自动化测试&#xff1a;Selenium]&#xff1a;环境部署和Webdriver的使用 一&#x…

服务器数据恢复—RAID5阵列中部分成员盘重组RAID5阵列后如何恢复原raid5阵列数据?

服务器数据恢复环境&#xff1a; 一台服务器挂接一台存储&#xff0c;该存储中有一组由5块硬盘组建的RAID5阵列。 服务器故障&#xff1a; 存储raid5阵列中有一块硬盘掉线。由于RAID5的特性&#xff0c;阵列并没有出现问题。工作一段时间后&#xff0c;服务器出现故障&#xff…

你还在用一串数字访问你的系统吗?

大家还记得第一次启动SpringBoot应用并在浏览器访问是如何进行的吗&#xff1f;在SpringBoot启动后&#xff0c;我们会看到如图所示&#xff1a; SpringBoot内置tomcat以端口8080启动&#xff0c;然后根据指引&#xff0c;我们在浏览器输入&#xff1a; http://127.0.0.1:8080…

穿越数据迷宫

第一章 在未来的世界里&#xff0c;人类的生活已经被高度数字化。互联网不再是简单的信息交换平台&#xff0c;而是成为了一个庞大的虚拟世界——“数据迷宫”。在这个世界里&#xff0c;每个人都有一个独特的数字身份&#xff0c;他们的生活、工作、娱乐都离不开这个虚拟空间…

六、元素应用CSS的习题

题目一&#xff1a; 使用CSS样式对页面元素加以修饰&#xff0c;制作“ 旅游攻略 ”网站。如下图所示 运行效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>旅游攻略</title><…

网络优化系列:探讨网络请求的性能提升策略

文章目录 引言一、网络请求优化1.1 DNS 解析耗时因素优化措施相关文章 1.2 创建连接耗时因素优化措施相关文章 1.3 发送 / 接收数据耗时因素优化措施相关文章 1.4 关闭连接耗时因素优化措施相关文章 二、网络库2.1 网络库的角色2.2 网络库的比较2.3 实际应用中的选择相关文章 三…

RabbitMQ 的集群

大家好&#xff0c;我是锋哥。今天分享关于【RabbitMQ 的集群】面试题&#xff1f;希望对大家有帮助&#xff1b; RabbitMQ 的集群 RabbitMQ 是一种流行的开源消息代理&#xff0c;广泛用于构建分布式系统中的消息队列。随着应用程序规模的扩大&#xff0c;单一的 RabbitMQ 实…