您的位置:首页 > 娱乐 > 八卦 > 行业门户网站大全_网站推广的作用是什么_手机免费建站app_天津网站优化软件

行业门户网站大全_网站推广的作用是什么_手机免费建站app_天津网站优化软件

2025/5/2 5:35:47 来源:https://blog.csdn.net/2403_87013629/article/details/146607194  浏览:    关键词:行业门户网站大全_网站推广的作用是什么_手机免费建站app_天津网站优化软件
行业门户网站大全_网站推广的作用是什么_手机免费建站app_天津网站优化软件

这个问题发现网上还没有人给出解决办法,那我就先填补这个空白,希望将来某一天对你有所帮助

问题如图所示

在全局样式中已经设置进度条的隐藏,这一切本来都好好的,但是通过

@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文件设置成你的目标属性。

到此为止,问题得到了解决,希望这篇文章对你有所帮助

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com