多平台开发要用的-webkit-tap-highlight-color

本文介绍如何使用-webkit-tap-highlight-color属性消除iOS设备上点击链接或可点击元素时出现的灰色背景。此属性仅适用于iOS平台。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。

示例:设置高亮色为50%透明的红色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
浏览器支持: 只有iOS(iPhone和iPad).



<template> <div class="navbar"> <!-- 实习管理按钮 --> <el-button class="practice-management" @click="handlePracticeClick" :plain="false" :round="false" :disabled="false" > 实习管理 </el-button> <!-- 汉堡菜单按钮 --> <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <!-- 面包屑导航 --> <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" /> <!-- 顶部导航 --> <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" /> <div class="right-menu"> <template v-if="appStore.device !== 'mobile'"> <!-- 头部搜索 --> <header-search id="header-search" class="right-menu-item" /> <!-- 源码地址 --> <el-tooltip content="源码地址" effect="dark" placement="bottom"> <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> </el-tooltip> <!-- 文档地址 --> <el-tooltip content="文档地址" effect="dark" placement="bottom"> <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> </el-tooltip> <!-- 全屏按钮 --> <screenfull id="screenfull" class="right-menu-item hover-effect" /> <!-- 主题模式 --> <el-tooltip content="主题模式" effect="dark" placement="bottom"> <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme"> <svg-icon v-if="settingsStore.isDark" icon-class="sunny" /> <svg-icon v-if="!settingsStore.isDark" icon-class="moon" /> </div> </el-tooltip> <!-- 布局大小 --> <el-tooltip content="布局大小" effect="dark" placement="bottom"> <size-select id="size-select" class="right-menu-item hover-effect" /> </el-tooltip> <!-- 导航菜单(学生、消息通知) --> <div class="main-menu"> <!-- 学生下拉菜单 --> <el-dropdown class="main-menu-item" trigger="hover" placement="bottom" > <span class="menu-text">学生</span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>学生</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> <!-- 消息通知下拉菜单 --> <el-dropdown class="main-menu-item" trigger="hover" placement="bottom" > <span class="menu-text">消息通知</span> <template #dropdown> <el-dropdown-menu class="message-dropdown"> <div class="message-content"> <p>欢迎进入工学云:</p> <p>1. 如果您是学校的师生,请在"我的"-"身份认证"中完成身份认证。</p> <p>2. 如果您是企业(HR),请使用微信小程序"蘑菇丁招聘"或者在电脑浏览器访问网址: <a href="https://zhaopin.moguding.net" target="_blank" class="external-link"> https://zhaopin.moguding.net </a> 上传企业资料,平台审核通过后可发布职位。 </p> </div> </el-dropdown-menu> </template> </el-dropdown> </div> </template> <!-- 个人信息下拉菜单(头像 + 昵称) --> <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover"> <div class="avatar-wrapper"> <img :src="userStore.avatar" class="user-avatar" /> <span class="user-nickname"> {{ userStore.nickName }} </span> </div> <template #dropdown> <el-dropdown-menu> <router-link to="/user/profile"> <el-dropdown-item command="profile">个人中心</el-dropdown-item> </router-link> <el-dropdown-item command="changePwd">修改密码</el-dropdown-item> <el-dropdown-item command="cancelAccount" divided>注销账号</el-dropdown-item> <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> <!-- 设置按钮 --> <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings"> <svg-icon icon-class="more-up" /> </div> </div> </div> </template> <script setup> import { ElMessageBox } from 'element-plus' import { useRouter } from 'vue-router' // 组件引入 import Breadcrumb from '@/components/Breadcrumb' import TopNav from '@/components/TopNav' import Hamburger from '@/components/Hamburger' import Screenfull from '@/components/Screenfull' import SizeSelect from '@/components/SizeSelect' import HeaderSearch from '@/components/HeaderSearch' import RuoYiGit from '@/components/RuoYi/Git' import RuoYiDoc from '@/components/RuoYi/Doc' import SvgIcon from '@/components/SvgIcon' // 状态管理引入 import useAppStore from '@/store/modules/app' import useUserStore from '@/store/modules/user' import useSettingsStore from '@/store/modules/settings' // 状态实例 const appStore = useAppStore() const userStore = useUserStore() const settingsStore = useSettingsStore() const router = useRouter() // 侧边栏切换 function toggleSideBar() { appStore.toggleSideBar() } // 实习管理按钮点击事件 function handlePracticeClick() { console.log('点击了实习管理'); } // 处理下拉菜单命令 function handleCommand(command) { switch (command) { case "profile": router.push('/user/profile') break case "changePwd": router.push('/user/change-pwd') break case "cancelAccount": cancelAccount() break case "logout": logout() break default: break } } // 注销账号确认 function cancelAccount() { ElMessageBox.confirm('确定要注销账号吗?此操作不可恢复!', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'error' }).then(() => { if (userStore.cancelAccount) { userStore.cancelAccount().then(() => { location.href = '/index' }) } else { location.href = '/index' } }).catch(() => { }) } // 退出登录 function logout() { ElMessageBox.confirm('确定注销并退出系统吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { userStore.logOut().then(() => { location.href = '/index' }) }).catch(() => { }) } // emits声明 const emits = defineEmits(['setLayout']) function setLayout() { emits('setLayout') } // 主题切换 function toggleTheme() { settingsStore.toggleTheme() } </script> <style lang='scss' scoped> .navbar { height: 50px; overflow: hidden; position: relative; background: #000; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); display: flex; align-items: center; /* 解决flex布局下子元素溢出问题 */ width: 100%; box-sizing: border-box; // 实习管理按钮样式(强化穿透优先级) :deep(.practice-management.el-button) { /* 基础布局 - 确保占满导航栏高度 */ height: 50px !important; /* 直接指定高度,避免100%可能的继承问题 */ min-width: 100px; margin: 0 !important; padding: 0 20px !important; order: -1; /* 强制居左 */ flex-shrink: 0; /* 避免被压缩 */ /* 样式覆盖 - 完全清除Element默认样式 */ border: none !important; border-radius: 0 !important; background-color: #409EFF !important; /* 主蓝色 */ color: #fff !important; font-size: 14px !important; font-weight: 500 !important; text-align: center !important; box-shadow: none !important; /* 清除默认阴影 */ box-sizing: border-box !important; /* 内容居中 - 解决文字偏移问题 */ display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; /* 重置行高,避免文字垂直偏移 */ /* 交互状态强化 */ &:hover { background-color: #66b1ff !important; /* 亮蓝色hover */ color: #fff !important; border-color: transparent !important; box-shadow: none !important; } &:active { background-color: #3a8ee6 !important; /* 深蓝光晕active */ color: #fff !important; border-color: transparent !important; } &:focus { outline: none !important; box-shadow: none !important; } /* 禁用状态(如果需要) */ &.is-disabled { background-color: #a0cfff !important; color: #fff !important; } } .hamburger-container { line-height: 46px; height: 100%; padding: 0 15px; cursor: pointer; transition: background 0.3s; -webkit-tap-highlight-color: transparent; &:hover { background: rgba(255, 255, 255, 0.1); } } .breadcrumb-container { padding: 0 15px; /* 避免面包屑挤压按钮 */ flex-shrink: 1; overflow: hidden; } .topmenu-container { flex: 1; padding-left: 15px; } .right-menu { margin-left: auto; height: 100%; line-height: 50px; display: flex; align-items: center; flex-shrink: 0; &:focus { outline: none; } .right-menu-item { display: inline-block; padding: 0 8px; height: 100%; font-size: 18px; color: #fff; vertical-align: text-bottom; &.hover-effect { cursor: pointer; transition: background 0.3s; &:hover { background: rgba(255, 255, 255, 0.1); } } &.theme-switch-wrapper { display: flex; align-items: center; svg { transition: transform 0.3s; &:hover { transform: scale(1.15); } } } } .main-menu { display: flex; align-items: center; height: 100%; margin: 0 8px; .main-menu-item { margin: 0 5px; padding: 0 8px; height: 100%; display: flex; align-items: center; cursor: pointer; color: #fff; font-size: 14px; &:hover { background: rgba(255, 255, 255, 0.1); } } } .message-dropdown { .message-content { padding: 15px; min-width: 350px; line-height: 1.6; font-size: 14px; p { margin: 0 0 10px 0; color: #333; } .external-link { color: #409EFF; text-decoration: underline; } } } .avatar-container { margin-right: 0px; padding-right: 0px; .avatar-wrapper { margin-top: 10px; right: 5px; position: relative; display: flex; align-items: center; padding: 0 10px; .user-avatar { cursor: pointer; width: 30px; height: 30px; border-radius: 50%; } .user-nickname{ margin-left: 8px; font-size: 14px; color: #fff; white-space: nowrap; } } } } } </style> 要怎么修改才能把实习管理弄成button的样式,并且是蓝色的,不需要跳转
最新发布
07-25
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值