项目场景：

页面上有两个日期组件，组件采用laydate。

问题描述：

只有一个日期组件的时候，交互没问题；同时两个日期组件存在的时候，点击输入框，组件闪现。

<!-- 日期组件1 -->
<div class="laydate-input"><input id="date1" type="text" lay-key="1" readonly><label for="date1" class="calendar-icon"></label>
</div>
<!-- 日期组件2 -->
<div class="laydate-input"><input id="date2" type="text" lay-key="1" readonly><label for="date2" class="calendar-icon"></label>
</div>// 日期组件1
laydate.render({elem: "#date1",type: "datetime",range: '-',
});
// 日期组件2
laydate.render({elem: "#date2",type: "datetime",
});

原因分析：

只加载一个日期组件的时候，交互没问题，那就是两个组件互相影响了，发现lay-key是唯一标识符。

解决方案：

lay-key改成不同的值。注意：增加trigger:click（默认focus）也可以优化交互。

<!-- 日期组件1 -->
<div class="laydate-input"><input id="date1" type="text" lay-key="1" readonly><label for="date1" class="calendar-icon"></label>
</div>
<!-- 日期组件2 -->
<div class="laydate-input"><input id="date2" type="text" lay-key="2" readonly><label for="date2" class="calendar-icon"></label>
</div>// 日期组件1
laydate.render({elem: "#date1",type: "datetime",range: '-',trigger: "click"
});
// 日期组件2
laydate.render({elem: "#date2",type: "datetime",trigger: "click"
});

Bug：laydate组件：闪现相关推荐

layui之laydate组件简介
1.layui之laydate组件是什么 layui是一个编程大神贤心所作的前端框架.laydate是layui的日期组件. 2.layui组件的运用 1)基础参数选项通过核心方法laydate.r ...
laydate组件给结束时间设置为23点59分59秒
laydate组件默认设置的时间,是年-月-日 00:00:00适合开始时间做为结束时间就不适用了. laydate.render({elem: '#startDate',type: 'dateti ...
laydate组件无法传值_Vue组件通信的几种方式
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 组件之间的关系如上图所示,A 和 B.B 和 C. ...
uni-app - 幸运抽奖圆形大转盘插件组件（支持后端接口确定最终奖品，可自定义轮盘宽高、颜色、字号、按钮等等，全端兼容代码干净整洁无 BUG，官方最好用的营销页面抽奖转盘源码）老虎机九宫格式抽奖机
前言如果您需要九宫格式抽奖机(如下图所示) ,请访问:这篇文章. 网上很多文章都非常乱且一堆 BUG,本文提供无 BUG 的 "组件式" 抽奖大转盘, 您只需要复制粘贴,按照组件 ...
layDate 日期与时间组件
在日常的网页开发过程中,日期组件已经成为不可或缺的组件之一.同时,随着广大杰出攻城狮的不懈努力,也出现了很多优秀的日期组件,其中我个人觉得 layDate 日期组件是一个非常不错的组件,简洁易用,样式 ...
ActionScript3.0自定义Flex组件问题重写组件的使用
最近在做Flex的一些学习,需要对Flex组件重写,当然可以两种选择MXML和ActionScript3.0重写,当然MXML的可视化的操作为重写提供了方便,但是要是更改组件的默认属性和添加一些框架属 ...
Unity3damp;amp;C#分布式游戏服务器ET框架介绍-组件式设计
前几天写了<开源分享 Unity3d客户端与C#分布式服务端游戏框架>,受到很多人关注,QQ群几天就加了80多个人.开源这个框架的主要目的也是分享自己设计ET的一些想法,所以我准备写一系列 ...
Android组件化方案及组件消息总线modular-event实战
背景组件化作为Android客户端技术的一个重要分支,近年来一直是业界积极探索和实践的方向.美团内部各个Android开发团队也在尝试和实践不同的组件化方案,并且在组件化通信框架上也有很多高质量的产 ...
解决layui laydate动态创建多个时不起作用点击无效的问题
最近在一个表单中有个自定义日期选项, 用户每点击一次按钮就动态增加一行日期选择框 . 我选择了laydate框架来完成 , 但在新生成的日期组件中 , 除了第一个生成的外 , 其他的点击和选择都不起作 ...

Bug：laydate组件：闪现

项目场景：

问题描述：

原因分析：

解决方案：

Bug：laydate组件：闪现相关推荐

最新文章

热门文章