这个问题发现网上还没有人给出解决办法,那我就先填补这个空白,希望将来某一天对你有所帮助
问题如图所示
在全局样式中已经设置进度条的隐藏,这一切本来都好好的,但是通过
@plugin "daisyui"
引入daisyUI后就出现了异常,css样式设置为 overflow:scroll的元素会出现不完整的滚动条,如图所示:
查阅相关资料,发现大家都没有这个问题,纳闷了,搜了半天找到了一个Gituhub页面
相似问题https://github.com/Innei/Shiro/issues/390这位的描述也是DaisyUI异常显示滚动条,但是它用的Tailwindcss版本应该是3.4,而我的Tailwindcss版本是4.0,并没有tailwind.config.js,根本不能按照它的方法来。
于是只能自己动手
在vue项目中找到node_modules文件,里面找到daisyui文件夹
在daisyUI文件夹里找到imports.js文件
既然是滚动条的问题,推测应该是daisyUI的滚动条样式覆盖了tailwindcss,于是问题关键在于去除daisyUI对滚动条样式
imports.js就是我们重点对象,顾名思义,它就是引入各种样式模块的,import.js的内容如下
import properties from './base/properties/index.js';
import scrollbar from './base/scrollbar/index.js';
import rootscrolllock from './base/rootscrolllock/index.js';
import rootcolor from './base/rootcolor/index.js';
import svg from './base/svg/index.js';
import rootscrollgutter from './base/rootscrollgutter/index.js';
import footer from './components/footer/index.js';
import skeleton from './components/skeleton/index.js';
import loading from './components/loading/index.js';
import validator from './components/validator/index.js';
import progress from './components/progress/index.js';
import swap from './components/swap/index.js';
import diff from './components/diff/index.js';
import button from './components/button/index.js';
import filter from './components/filter/index.js';
import badge from './components/badge/index.js';
import input from './components/input/index.js';
import drawer from './components/drawer/index.js';
import avatar from './components/avatar/index.js';
import stat from './components/stat/index.js';
import radio from './components/radio/index.js';
import breadcrumbs from './components/breadcrumbs/index.js';
import label from './components/label/index.js';
import link from './components/link/index.js';
import card from './components/card/index.js';
import status from './components/status/index.js';
import steps from './components/steps/index.js';
import tab from './components/tab/index.js';
import dropdown from './components/dropdown/index.js';
import list from './components/list/index.js';
import table from './components/table/index.js';
import stack from './components/stack/index.js';
import collapse from './components/collapse/index.js';
import divider from './components/divider/index.js';
import checkbox from './components/checkbox/index.js';
import rating from './components/rating/index.js';
import fileinput from './components/fileinput/index.js';
import toggle from './components/toggle/index.js';
import textarea from './components/textarea/index.js';
import dock from './components/dock/index.js';
import indicator from './components/indicator/index.js';
import mockup from './components/mockup/index.js';
import kbd from './components/kbd/index.js';
import radialprogress from './components/radialprogress/index.js';
import toast from './components/toast/index.js';
import menu from './components/menu/index.js';
import hero from './components/hero/index.js';
import select from './components/select/index.js';
import calendar from './components/calendar/index.js';
import range from './components/range/index.js';
import navbar from './components/navbar/index.js';
import countdown from './components/countdown/index.js';
import alert from './components/alert/index.js';
import chat from './components/chat/index.js';
import mask from './components/mask/index.js';
import fieldset from './components/fieldset/index.js';
import modal from './components/modal/index.js';
import carousel from './components/carousel/index.js';
import tooltip from './components/tooltip/index.js';
import timeline from './components/timeline/index.js';
import radius from './utilities/radius/index.js';
import glass from './utilities/glass/index.js';
import typography from './utilities/typography/index.js';
import join from './utilities/join/index.js';export const base = {properties,scrollbar,rootscrolllock,rootcolor,svg,rootscrollgutter};
export const components = {footer,skeleton,loading,validator,progress,swap,diff,button,filter,badge,input,drawer,avatar,stat,radio,breadcrumbs,label,link,card,status,steps,tab,dropdown,list,table,stack,collapse,divider,checkbox,rating,fileinput,toggle,textarea,dock,indicator,mockup,kbd,radialprogress,toast,menu,hero,select,calendar,range,navbar,countdown,alert,chat,mask,fieldset,modal,carousel,tooltip,timeline};
export const utilities = {radius,glass,typography,join};
从中发现了scrollbar的蛛丝马迹,分别是第二行和第66行
我这里由于不需要显示滚动条,于是就直接把这两行删去了,当然你也可以顺着路径找到index.js文件设置成你的目标属性。
到此为止,问题得到了解决,希望这篇文章对你有所帮助