使用Tailwindcss之后,vxe-table表头排序箭头高亮消失的问题解决

环境

vue@2.7.8
vxe-table@3.5.9
tailwindcss/postcss7-compat@2.2.17
postcss@7.0.39
autoprefixer@9.8.8

问题

vxe-table 表格表头 th 的排序箭头在开启正序或逆序排序时,会显示蓝色高亮来提示用户表格数据处在排序情况下。在项目开启运行了tailwindcss之后,高亮效果消失,影响了用户使用体验。
在这里插入图片描述
我们看到给箭头设置颜色的样式:

.vxe-table .vxe-sort-asc-btn.sort-active, .vxe-table .vxe-sort-desc-btn.sort-active {color: "#409eff";
}

该样式在Chrome Dev Tools的样式标签页生效且优先级最高,我们尝试添加样式 color, background-color, border-color ,均未生效。

分别尝试注释掉tailwindcss.css中对tailwindcss的base,components,和utilities的注释,发现注释掉base基本样式时,蓝色箭头高亮效果恢复了,那我初步判断是tailwindcss的base基本样式与vxe-table的样式产生了冲突。

然后我注意到这个蓝色箭头的三角形是由::before和::after 伪元素 添加单侧的边框样式构成的,如何实现请参考:

.info-tab {position: relative;
}
.info-tab::after {content: '';border: 4px solid transparent;border-top-color: #2c8ac2;position: absolute;top: 0;
}

找到这个线索之后,查阅node_modules/tailwindcss/dist/base.css,看到对伪元素的样式加了以下限制

// from node_modules/tailwindcss/dist/base.css
*, ::before, ::after {--tw-border-opacity: 1;border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}*, ::before, ::after {box-sizing: border-box;
}*, ::before, ::after {box-sizing: border-box; /* 1 */border-width: 0; /* 2 */border-style: solid; /* 2 */border-color: currentColor; /* 2 */
}

我们在Chrome Dev Tools的样式标签页一个个尝试注释掉tailwindcss加在伪元素的样式,发现取消勾选 --tw-border-opacity 之后,蓝色可以正常显示,如图所示:
在这里插入图片描述

原因分析

Tailwind 包含一组开箱即用的实用基本样式,我们称之为Preflight,它实际上只是modern-normalize 加上一层薄薄的额外的更有主见的样式。
有关 Preflight 应用的所有样式的完整参考,请参阅样式表

解决

方案 1. 添加基本​​样式

在 Preflight 上添加自己的基本样式,将它们添加到@layer base指令中的 CSS 中:

// from tailwindcss.css
@import "tailwindcss/base";
@layer base {*, ::before, ::after {--tw-border-opacity: unset;}
}
@import "tailwindcss/components";
@import "tailwindcss/utilities";

在添加基本样式文档中了解更多信息

拓展

观察另一个项目,没能复现该问题,该项目环境如下:

vue@3.3.13
tailwindcss@3.4.4
vxe-table@4.6.0
postcss@8.4.38
autoprefixer@10.4.19

观察发现该版本的vxe-table不是用伪元素添加单侧边框的方式生成表格表头排序箭头,而是用伪元素设置 content 属性,content 赋值上下箭头的UnitCode,因此tailwindcss的Preflight基础样式不会影响到其激活状态下蓝色高亮显示的效果。

// 正序箭头
.vxe-icon-caret-up:before {content: "\e8ee"
}
// 逆序箭头
.vxe-icon-caret-up:before {content: "\e8ed"
}

通过给伪元素:before的content赋值,使用unicode字符集,采用4位16进制编码,以上用到的unicode字符集应该对应vxeiconfont的素材库。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据集的未来:如何利用亮数据浏览器提升数据采集效率

目录 一、跨境电商的瓶颈1、技术门槛2、语言与文化差异3、网络稳定性4、验证码处理和自动识别5、数据安全6、法规和合规 二、跨境电商现在是一个合适的商机吗?三、数据集与亮数据浏览器1、市场分析2、价格监控3、产品开发4、供应链优化5、客户分析 四、亮数据浏览器…

上海计算机学会2020年3月月赛C++丙组T4连乘问题

题目描述 给定 a1​,a2​,⋯,an​,请计算一组乘积,记为P1​,P2​,⋯,Pn​,其中 Pi​ 的定义如下: 也就是说,Pi​ 是 a1​ 到 an​ 的连乘再除去 ai​。由于答案可能比较大,输出每个 Pi​ 模 10000 的余数。…

算法05 模拟算法之二维数组相关内容详解【C++实现】

大家好,我是bigbigli,前面一节我们一节讲过一维数组的模拟了,如果还没看的话,可以👉点击此处。模拟算法还有很多内容需要讲,比如图像、日期相关的模拟算法,后续将继续更新,今天先来讲…

代码随想录——跳跃游戏Ⅱ(Leetcode 45)

题目链接 贪心 class Solution {public int jump(int[] nums) {if(nums.length 1){return 0;}int count 0;// 当前覆盖最远距离下标int curDistance 0;// 下一步覆盖距离最远下标int nextDistance 0;for(int i 0; i < nums.length; i){nextDistance Math.max(nums[…

快速修复mfc100u.dll丢失解决方案

相连文章&#xff1a;SecureCRT的安装破解 [详细过程2024] 有小伙伴向我反馈在打开SecureFX注册机之后显示【mfc100u.dll找不到】重装之后也没有用&#xff0c;这个是因为Microsoft Visual C的运行时组件和库出现了错误&#xff0c;直接选择重新安装就可以 出现这种情况的原因…

高性能并行计算华为云实验五:PageRank算法实验

目录 一、实验目的 二、实验说明 三、实验过程 3.1 创建PageRank源码 3.2 makefile的创建和编译 3.3 主机配置文件建立与运行监测 四、实验结果与分析 4.1 采用默认的节点数量及迭代次数进行测试 4.2 分析并行化下节点数量与耗时的变化规律 4.3 分析迭代次数与耗时的变…

MySQL——联表查询JoinON详解

Join 对比&#xff08;7种&#xff09; 代码演示&#xff1a; -- 查询参加了考试的同学&#xff08;学号&#xff0c;姓名&#xff0c;科目编号&#xff0c;分数&#xff09; SELECT * FROM student SELECT * FROM result/* 1. 分析需求&#xff1a;分析查询的字段来自哪些表&…

spring原理篇

第三方bean默认为方法名 自动配置 自动配置的原理 springboot的自动配置原理 首先是从 SpringBootApplication这个注解出发 有一个ComponentScan()默认扫描同级包及其子包 第二个注解是springbootconfiguration 声明当前类是一个配置类 第三个是核心 enableAutoConfigurati…

通过看板系统管理工作流程:强调持续交付与可视化工作的全面指南

目录 前言1. 看板系统简介1.1 看板系统的基本原理1.2 看板系统的主要特点 2. 强调持续交付的重要性2.1 持续交付的优势2.2 持续交付的实施步骤 3. 可视化工作的核心价值3.1 提高透明度和可见性3.2 促进工作流程的优化3.3 增强团队的自我管理能力 4. 看板系统的实施指南4.1 初始…

vue-cli 搭建项目,ElementUI的搭建和使用

vue-cli 官方提供的一个脚手架&#xff0c;用于快速生成一个vue的项目模板&#xff1b;预先定义 好的目录结构及基础代码&#xff0c;就好比咱们在创建Maven项目时可以选择创建一个 骨架项目&#xff0c;这个骨架项目就是脚手架&#xff0c;我们的开发更加的快速&#xff1b; …

在FlowUs息流,让知识库为你所用|如何打造个人知识库|如何打造企业知识库

&#x1f389; 在 FlowUs 的世界中&#xff0c;知识绽放出无限的可能&#xff01;&#x1f680; 在当今信息爆炸的时代&#xff0c;知识的更新换代速度极快&#xff0c;我们每天都面临着海量的信息冲击。拥有一个属于自己的知识库变得至关重要。 首先&#xff0c;打造自己的知…

【PB案例学习笔记】-24创建一个窗口图形菜单

写在前面 这是PB案例学习笔记系列文章的第24篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…

免费APP分发平台:小猪APP分发如何解决开发者的痛点

你是否曾为自己开发的APP找不到合适的分发平台而烦恼&#xff1f;你是否因为高昂的分发费用而望而却步&#xff1f;放心吧&#xff0c;你并不是一个人。很多开发者都面临同样的问题。但别担心&#xff0c;小猪APP分发来了&#xff0c;它可以帮你解决这些问题。 小猪app封装www…

条件断点在找call中的应用

以TLBB为例&#xff0c;在2024.6.24附近左右的时间段&#xff0c;游戏窗口切换时就会有两个左右的call&#xff0c;在x64dbg下断点之后切换回游戏窗口&#xff0c;很难分辨出哪个是我们需要的动作引起的call&#xff0c;因此在send函数处下条件断点&#xff1a;$breakpointcoun…

数据库课程知识点总结

数据库概述 数据库基本特点&#xff1a;数据结构化&#xff0c;数据独立性&#xff0c;数据冗余小&#xff0c;易扩充&#xff0c;统一管理和控制&#xff0c;永久存储&#xff0c;有组织&#xff0c;可共享 三级模式 模式&#xff1a;一个数据库只有一个模式&#xff0c;是对…

秋招Java后端开发冲刺——关系型数据库篇(Mysql)

本文介绍关系型数据库及其代表Mysql数据库&#xff0c;并介常见面试题目。 一、数据库概述 1. 数据库&#xff08;Database, DB&#xff09;&#xff1a;是长期储存在计算机内的、有组织的、可共享的数据集合。 2. 数据库管理系统&#xff08;Database Management System, D…

服务器数据恢复—异常断电导致RAID6阵列中磁盘出现坏扇区的数据恢复案例

服务器存储数据恢复环境&#xff1a; 一台存储中有一组由12块SAS硬盘组建的RAID6磁盘阵列&#xff0c;划分为一个卷&#xff0c;分配给几台Vmware ESXI主机做共享存储。该卷中存放了大量Windows虚拟机&#xff0c;这些虚拟机系统盘是统一大小&#xff0c;数据盘大小不确定&…

【Linux】静态库、动态库

动静态库里面包含的是源文件通过汇编阶段生成的后缀为.o的可重定位目标文件。我们在使用C语言&#xff0c;包含一个stdio.h头文件就可以使用scanf方法&#xff0c;其实都是系统调用了相应的头文件和库&#xff0c;库里面有开发者已经写好各种方法。也就是说我们在使用C语言时&a…

RabbitMQ实践——Stream队列的使用方法

大纲 什么是Stream队列创建Stream发布消息消费从第一条消息开始读取从最后一条消息开始读取从某个时间戳开始读取从某个偏移量开始读取 样例长度控制长度控制时间控制服务端筛选消息发布方设定过滤值消费方设置服务端过滤&#xff0c;且要二次过滤 工程代码参考资料 在 《Rabb…

Lua网站开发之文件表单上传

这个代码示例演示如何上传文件或图片&#xff0c;获取上传信息及保存文件到本地。 local fw require("fastweb") local request require("fastweb.request") local response require("fastweb.response") local cjson require("cjson&q…