登录
Go教程
Go问答
MySQL
Redis
软件教程
人工智能
业界新闻
php教程
java教程
python教程
linux
前端
常见问题
AI提示词
作文
画画
一周内
三天内
一周内
一月内
三月内
最新
最热
文章
·
前端
| 1天前 |
setup 模式下全局属性处理优化
Vue3的setup中不可用$filters，因其是Vue2实例属性且全局过滤器已被弃用；推荐改用纯函数封装（如formatDate）、模块导出并在setup中直接导入使用。
407
收藏
文章
·
前端
| 6天前 |
HTML中创建一个大的输入框，可以通过调整
或
元素的样式来实现。以下是一个简单示例：使用 <input type="text"> 创建大输入框：<input type="text" style="width: 100%; height: 100px; font-size: 18px;" placeholder="请输入内容">使用 <textarea> 创建大输入框</a></div> <a href="/article/602750.html" class="img_box"><img src="/uploads/20260516/17789214276a082fd3c86cd.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">优先用CSS控制textarea尺寸，设width/height而非rows/cols；resize生效需满足overflow允许且内容溢出；自适应高度须先设height:auto再读scrollHeight，并清空内联样式防累积。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>406</span> <span class="collectBtn user_collection" data-type="article" data-id="602750"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 5天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/603655.html" class="aBlack">Vue3用toRefs保持响应式结构教程</a></div> <a href="/article/603655.html" class="img_box"><img src="/uploads/20260518/17790779606a0a9348c1f2c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">解构reactive对象会导致响应式丢失，因为取值是原始副本而非Proxy代理；toRefs将每个属性转为ref，使解构后仍可响应更新。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>406</span> <span class="collectBtn user_collection" data-type="article" data-id="603655"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/605921.html" class="aBlack">大屏内容横向拉伸怎么解决？max-width+margin居中搞定</a></div> <a href="/article/605921.html" class="img_box"><img src="/uploads/20260521/17793287726a0e6704cc8a1.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">max-width必须配margin:0auto才能居中，因max-width仅限制最大宽度而不控制位置；仅设max-width时内容左对齐、右侧留白，而margin:0auto触发浏览器水平居中逻辑，且避免margin:auto引发的垂直偏移。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>406</span> <span class="collectBtn user_collection" data-type="article" data-id="605921"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 22小时前 | </div> <div class="tit lineTwoOverflow"><a href="/article/607825.html" class="aBlack">CSS变量简化HSL调整方法</a></div> <a href="/article/607825.html" class="img_box"><img src="/uploads/20260522/17794445696a102b59edea9.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">不能只定义--primary-color:hsl(210,70%,60%)，因浏览器将其视为字符串，无法在hsl()中解析var(--primary-color)，导致回退为初始色或透明；且锁死H/S/L维度，无法单独调整任一参数。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>406</span> <span class="collectBtn user_collection" data-type="article" data-id="607825"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4小时前 | </div> <div class="tit lineTwoOverflow"><a href="/article/608554.html" class="aBlack">UIkit响应式导航菜单实现教程</a></div> <a href="/article/608554.html" class="img_box"><img src="/uploads/20260523/17795076796a1121dfb2af8.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">使用UIkit可快速构建响应式导航菜单，首先通过uk-navbar创建基础导航结构，利用uk-hidden@m配合uk-toggle实现小屏幕下的汉堡按钮，点击触发Dropdown或Off-canvas折叠菜单，结合uk-dropdown或uk-offcanvas属性设置定位与动画模式，无需额外代码即可完成多端适配，关键在于掌握组件联动机制与断点控制。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>406</span> <span class="collectBtn user_collection" data-type="article" data-id="608554"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 13分钟前 | </div> <div class="tit lineTwoOverflow"><a href="/article/608885.html" class="aBlack">修复触摸屏点击区域失效与按钮异常指南</a></div> <a href="/article/608885.html" class="img_box"><img src="/uploads/20260523/17795235926a11600877570.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">本文提供针对响应式可点击人体地图在移动设备（尤其是触屏手机）上区域不可点、关闭按钮尺寸错乱等问题的系统性解决方案，涵盖事件绑定优化、DOM操作重构、CSS适配及jQuery最佳实践。本文提供针对响应式可点击人体地图在移动设备（尤其是触屏手机）上区域不可点、关闭按钮尺寸错乱等问题的系统性解决方案，涵盖事件绑定优化、DOM操作重构、CSS适配及jQuery最佳实践。在构建基于<map>和<area>的交互式人体疼痛地图时，开发者</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>406</span> <span class="collectBtn user_collection" data-type="article" data-id="608885"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/603334.html" class="aBlack">Shadow DOM 实现样式隔离与组件封装详解</a></div> <a href="/article/603334.html" class="img_box"><img src="/uploads/6034/923da8d412aa5a1a106fd4957748a2be.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">ShadowDOM通过创建物理隔离的DOM子树实现样式与结构封装，需用attachShadow({mode:'closed'})创建封闭根，内联样式并利用:host、::slotted和CSS自定义属性可控透传，确保真正独立性。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>405</span> <span class="collectBtn user_collection" data-type="article" data-id="603334"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/605875.html" class="aBlack">闭包实现访问控制，动态锁定敏感接口</a></div> <a href="/article/605875.html" class="img_box"><img src="/uploads/20260521/17793265196a0e5e377d59d.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">访问权限代理是一种基于闭包的轻量级控制模式，通过封装业务函数并注入用户身份、角色等上下文，在调用前实时校验权限，满足则执行原逻辑，否则拒绝；支持动态重建代理以适配登录态变更与运行时策略切换。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>405</span> <span class="collectBtn user_collection" data-type="article" data-id="605875"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/606464.html" class="aBlack">CSS中如何防止颜色值错误解析</a></div> <a href="/article/606464.html" class="img_box"><img src="/uploads/20260521/17793542286a0eca748d03c.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">var(--color)“没生效”常因值非法被浏览器静默丢弃，如--bg:12（缺单位）、--size:auto50%（类型混用）；@property可强制类型校验，但仅Chromium支持；回退值仅在变量未定义或语法非法时触发，空值、inherit、transparent等合法值不触发。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>405</span> <span class="collectBtn user_collection" data-type="article" data-id="606464"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/607060.html" class="aBlack">属性描述符实现微任务队列水位控制解析</a></div> <a href="/article/607060.html" class="img_box"><img src="/uploads/20260522/17794098256a0fa3a1e8db7.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">属性描述符本身不能直接实现微任务队列水位控制，需在set中嵌入Promise、queueMicrotask与状态管理逻辑；结合Proxy可拦截push等操作实现动态水位判断；水位应综合消息大小、网络状态等业务因素动态调整，并设微任务硬上限防事件循环饥饿。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>405</span> <span class="collectBtn user_collection" data-type="article" data-id="607060"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 23小时前 | </div> <div class="tit lineTwoOverflow"><a href="/article/607757.html" class="aBlack">线程池优化前端大数据序列化计算方法</a></div> <a href="/article/607757.html" class="img_box"><img src="/uploads/20260522/17794411466a101dfab6f5e.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">前端大数据量序列化卡顿的根本原因是JavaScript单线程导致计算与UI渲染争用主线程；需通过WebWorker剥离密集计算，并优化任务内部避免深拷贝、采用流式处理和结果缓存，辅以小数据量直行与加载态提示等兜底策略。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>405</span> <span class="collectBtn user_collection" data-type="article" data-id="607757"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 3天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/604409.html" class="aBlack">Shadow DOM 变量穿透实现可定制主题方案</a></div> <a href="/article/604409.html" class="img_box"><img src="/uploads/20260519/17792005166a0c720401f10.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">ShadowDOM的CSS变量是唯一被规范允许的安全主题通信机制，需显式挂载于宿主元素并用var(--name,fallback)读取，不继承:root或body中的声明。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>404</span> <span class="collectBtn user_collection" data-type="article" data-id="604409"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/605268.html" class="aBlack">ESM 模块中 document.currentScript 失效的原因及其替代方案</a></div> <a href="/article/605268.html" class="img_box"><img src="/uploads/20260520/17792694456a0d7f456b478.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">ESM中document.currentScript始终为null是规范设计而非兼容性问题，因其执行不绑定HTMLscript标签；应改用import.meta.url获取模块路径，或根据环境选用构建注入、错误堆栈解析等替代方案。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>404</span> <span class="collectBtn user_collection" data-type="article" data-id="605268"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 7小时前 | </div> <div class="tit lineTwoOverflow"><a href="/article/608304.html" class="aBlack">HTML5 Shadow DOM是什么？如何封装组件样式？</a></div> <a href="/article/608304.html" class="img_box"><img src="/uploads/20260523/17794958786a10f3c612955.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">ShadowDOM通过创建独立的DOM子树实现组件样式封装，解决了全局CSS带来的命名冲突和样式污染问题。其核心机制是为宿主元素创建ShadowRoot，形成隔离的渲染作用域，内部样式仅作用于该子树。1.它防止样式泄露与渗透，确保组件外观稳定；2.提供两种模式：open（便于调试）与closed（更强封装性但调试困难）；3.注意继承属性穿透、变量可共享、伪元素定制等特性；4.虽非完美，但为组件化开发提供了原生可靠的样式管理方案。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>404</span> <span class="collectBtn user_collection" data-type="article" data-id="608304"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> </ul> <div class="mngfPage"><a href="/articlelist/88_hot_7_21.html" class="prevPage on"></a> <a href="/articlelist/88_hot_7_1.html">1</a><a href="/articlelist/88_hot_7_21.html">21</a><a class="currentPage">22</a><a href="/articlelist/88_hot_7_23.html">23</a><a href="/articlelist/88_hot_7_91.html">91</a> <a href="/articlelist/88_hot_7_23.html" class="nextPage on"></a></div> </div> </div> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> let flaga = 1; var category_id = 88; let strbiaoqian = ''; let zhankaihtml = ''; // let zhankaihtml = '<div class="zhankaiflag biaoqianone " style="display: inline-block;" onclick="zhankaiflagclick(this);">展开<i></i></div>'; let shouqihtml = ''; // let shouqihtml = '<div class="zhankaiflag biaoqianone zhankai" style="display: inline-block;" onclick="zhankaiflagclick(this);">收起<i></i></div>'; let allhtml = ''; let fumo = ''; $(".userInfo1 .biaoqianone").each(function(){ var href = $(this).attr('href'); var cat_id = $(this).data('id'); let cuc = '<a href="'+href+'" class="biaoqianone" style="display: inline-block;">'; if(category_id!==0&&category_id==cat_id){ cuc ='<a href="javascript:;" class="biaoqianone hover" style="display: inline-block;">'; } fumo = cuc; allhtml+=fumo+$(this).html()+'</a>'; strbiaoqian+=fumo+$(this).html()+'</a>'; // if(flaga<=8){ // } flaga++; }); strbiaoqian+=zhankaihtml; allhtml+=shouqihtml; $(".userInfo1").html(strbiaoqian); // function zhankaiflagclick(obj){ // if($(obj).html()=='展开<i></i>'){ // $(obj).html('收起<i></i>'); // $(obj).addClass('zhankai'); // $(".userInfo1").html(allhtml); // }else{ // $(obj).html("展开<i></i>"); // $(obj).removeClass('zhankai'); // $(".userInfo1").html(strbiaoqian); // } // } $('.timeLimitBox').click(function(){ $(this).toggleClass('hover') }) </script> </body> </html>
