1.DIY vue3组件: 动手实现高斯模糊遮罩层的遮罩罩层对话框效果
2.ligerUIä¸ligerDialogåligerWindowçåºå«
3.Cypress 踩坑记 - DOM 遮挡
4.SuperSlide滚动的遮罩层宽/高怎么计算的?如何设置具体一个值?
DIY vue3组件: 动手实现高斯模糊遮罩层的对话框效果
前言 & 一点点废话
最近迷上了前端设计,想借此机会放松一下平日里繁忙的层源AI工作。帮朋友重构班级主页网站时,码遮发现Vue3的代码模块化设计极为便捷,许多组件和钩子可以直接复用。遮罩罩层因此,层源怎么识别网站源码我决定整理并分享个人设计的码遮组件实现。未来几篇文章将围绕这一主题展开。代码
你可能会问:为什么自己写组件,遮罩罩层而不是层源直接使用像Element-Plus这样的库呢?答案是:尽管Element-Plus功能丰富,但其接口有限,码遮样式定制难度较高,代码可能无法满足设计爱好者的遮罩罩层需求。另外,层源大型组件库体积较大,码遮对于追求轻量级和高效应用的开发者来说,自定义HTML5、CSS3与Vue3组件可能更为合适。我的bs框架源码组件库旨在简化复用流程,提供直观的特效展示,让使用者在短时间内上手,并能根据需求进行个性化定制。
为了帮助读者快速了解并复用组件,我将文章结构安排如下:
组件效果展示
登录界面和切换背景的对话框采用高斯模糊遮罩层,设计灵感源自苹果的特效,旨在吸引用户聚焦于对话框内容。
用法指南
参数设置说明:
槽位(Slot):用于嵌入自定义内容。
模板(Template)部分:展示基本结构与布局。在线课堂 源码
脚本(Script)部分:实现逻辑功能与状态管理。
只需通过设置showDialog为true即可激活对话框。
源码示例
请根据需求调整mainColor和backFilter变量。以下是一个可行的样式方案,供参考:
ligerUIä¸ligerDialogåligerWindowçåºå«
ä»APIæ¥ç,å®ä»¬ä¹é´è§ä¹æ²¡ææ ¹æ¬æ§çåºå«,ä¸é¢ç对æ¯å¾,
æè¿éåªååºäºAPIææ¡£ä¸åæ°ç对æ¯å¾,ä¸¤ä¸ªç±»å ¶ä»çAPIä¹ä¸å¾ä¸æ åµå·®ä¸å¤,DialogçAPIæ¯è¾å¤,ä½å ä¹é½æ¶µçäºWindowä¸çAPI
WindowçAPIéé¢æ¯Dialogå¤åºäºä¸æ ·ä¸è¥¿,é£å°±æ¯äºä»¶åè°å½æ°.
å¨ ligerWindow.js ä¸,æåç°ç¬¬è¡,å¦ä¸
l.controls.Window.ligerExtend(l.core.Win, {
åæ ·æå¨ ligerDialog.js ä¸,è¡,æåæ ·çä¸å¥è¯,å¦ä¸
l.controls.Dialog.ligerExtend(l.core.Win, {
è¿è¡¨ç¤ºDialogä¸Windowæ¯ç»§æ¿èªåä¸ä¸ªç¶ç±» l.core.Win,éåææ¥çäº js/core/base.js,å¨è¿ä¸ªæ件çè¡æçå°äº liger.core.Win ççå®é¢ç®.liger.core.Win 并没æåå¾å¤çäºæ ,åªå®ç°é®ç½©åè½åå®ä¹ä¸äºæ½è±¡æ¥å£.
æåæåéæ°åå»é è¯»äº ligerDialog.js ç代ç ,ä»ç¬¬ è¡å¼å§ä¸ç´å°ç»æ,è¿ææ¯ Dialog ä¸ Window æ大çåºå«æå¨,Dialog æ¯åä¾å¯¹è±¡,ä¸å»ºè®®å¨ä½¿ç¨çæ¶å继æ¿ä¸æ©å±,è Window æ¯ä¸ä¸ªå¤ä¾ç±»,å 许ç´æ¥ç»§æ¿å¹¶æ©å±.
ææ¿åºæºç éé¢ 5个 æåºæ¬çå½æ°,æ¥è¯´æ Dialog æ¯åä¾ç±»çäºå®ï¼
$.ligerDialog.open = function (p)
{
// å®ä¾åä¸ä¸ª l.controls.Dialog 对象
// å é¨å¯ä»¥è¿½è¿°å°ç¬¬è¡,ä½¿ç¨ liger.run() å½æ°æé Dialog å®ä¾
return $.ligerDialog(p);
};
$.ligerDialog.close = function ()
{
// æ ¹æ® Dialogç±»å æ¥å°å°ææç dialog å®ä¾å¯¹è±¡
var dialogs = l.find(l.controls.Dialog.prototype.__getType());
// 循ç¯æ¯ä¸ä¸ª dialogå®ä¾å¹¶éæ¯
for (var i in dialogs)
{
var d = dialogs[i];
d.destroy.ligerDefer(d, 5);
}
// éèé®ç½©å±
// å¨ligerUIä¸,ææççªå£ä½¿ç¨çæ¯ä¸ä¸ªå ¨å±çmask
// ç¸å ³ä»£ç å¯ä»¥ç js/core/base.js è¡
l.win.unmask();
};
$.ligerDialog.show = function (p)
{
var dialogs = l.find(l.controls.Dialog.prototype.__getType());
if (dialogs.length)
{
for (var i in dialogs)
{
// å¦æå·²ç»åå¨ dialogå®ä¾,é£ä¹å°±ç´æ¥ä½¿ç¨å®ä¾å¯¹è±¡
// æ¾ç¤ºå·²åå¨çdialog,并è¿å
dialogs[i].show();
return;
}
}
// å¦æä¸åå¨ dialogå®ä¾,ååå§åä¸ä¸ªå®ä¾å¹¶è¿å
return $.ligerDialog(p);
};
$.ligerDialog.hide = function ()
{
var dialogs = l.find(l.controls.Dialog.prototype.__getType());
// éèdialogå®ä¾ä¹æ¯ç¸åçæ¹å¼
for (var i in dialogs)
{
var d = dialogs[i];
d.hide();
}
};
$.ligerDialog.tip = function (options)
{
// åå§åé项åæ°
options = $.extend({
showType: 'slide',
width: ,
modal: false,
height:
}, options || { });
$.extend(options, {
fixedType: 'se',
type: 'none',
isDrag: false,
isResize: false,
showMax: false,
showToggle: false,
showMin: false
});
// æé ä¸ä¸ªDialogå®ä¾
return $.ligerDialog.open(options);
};
æ ¹æ®ä¸é¢ç代ç 解读,ç»è®ºå°±å¾æ¸ æ°äºï¼
Dialogæ¯ä¸ä¸ªåä¾å¯¹è±¡,ä¸å»ºè®®ç»§æ¿ä¸æ©å±
Windowæ¯å¤ä¾ç±»,å 许继æ¿å¹¶æ©å±
æè§å¾ligerUI对Windowç设计没æ Ext 设计å¾å¥½,Dialogåºä½ä¸ºWindowçä¸ä¸ªåä¾å¯¹è±¡æç¸å¯¹åç,Extå°±æ¯è¿ä¹åç.æå ´è¶£çè¯,å¯ä»¥äºè§£ä¸Ext,Extæ¯ç®åæ认为å端UIç»ä»¶å设计å¾æ好çä¸ä¸ªæ¡æ¶.
Cypress 踩坑记 - DOM 遮挡
Cypress是一个热门的测试工具,但使用过程中发现了某些问题,以下记录问题发现及解决思路。
在Cypress下,点击指令通常能正常工作,分享社区源码但在特定场景下却表现异常。例如,测试点击遮罩层以关闭弹窗时,预期操作顺畅,但当模型填充内容后,操作突然失败。
测试代码简明易懂,执行Cypress后,一切如预期,活动行源码但当模型内容增多,原本能正常点击的地方开始报错,明显不合理。
查阅文档发现,点击指令支持坐标或位置参数,但并未解决问题,似乎点击操作与元素遮挡计算有关。Cypress的遮挡计算似乎还有待优化。
深入源码分析,发现Cypress点击操作会进行一些判断,重要参数coords.fromElViewport显示了中心点坐标。Cypress使用该坐标获取最顶层元素并与目标元素进行对比。这是点击成功与否的关键因素,即中心点被遮挡可点击,未被遮挡则不能点击,操作略显简单粗暴,导致点击稳定性问题。
为验证分析结论,创建了测试用例。首先,创建一个极小的遮挡元素置于中央,测试发现点击失败。之后,将四周元素全部遮挡,仅留下中心一点,结果却能成功点击。
总结,Cypress的遮挡检查方式过于直接,可能不甚妥当,且容易引起混淆。理论上,采用多层对比交叉区域的方法可能更为合理。关于点击方式的优化,提供坐标或方位选择,以更准确判断是否遮挡,而非仅支持force操作,后者会降低测试意义。
SuperSlide滚动的遮罩层宽/高怎么计算的?如何设置具体一个值?
以下是全部代码,请自行修改及js路径 SuperSlide - 实用焦点图 *{ margin:0; padding:0; list-style:none; }body{ background:#fff; font:normal px/px 宋体; }img{ border:0; }a{ text-decoration:none; color:#; }a:hover{ color:#1。