From 80188cdcd88e043d7c450f48254a6530239afb47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?=
<3277200+sentsim@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:34:52 +0800
Subject: [PATCH 1/8] =?UTF-8?q?fix(carousel):=20=E4=BF=AE=E5=A4=8D?=
=?UTF-8?q?=E5=8A=A8=E6=80=81=E5=88=A0=E9=99=A4=E6=9D=A1=E7=9B=AE=E8=87=B3?=
=?UTF-8?q?=E6=9C=80=E5=90=8E=E4=B8=80=E4=B8=AA=E6=97=B6=E8=B0=83=E7=94=A8?=
=?UTF-8?q?=20inst.reload=20=E7=9A=84=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98?=
=?UTF-8?q?=20(#2107)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* fix(carousel): 修复外部动态增删条目时调用 inst.reload 的异常问题
* chore: 更正命名,避免歧义
* fix: 修复 slide 方法在条目数为 1 的滑动异常问题
---
examples/carousel.html | 66 +++++++++++++++++++++--------------------
src/modules/carousel.js | 29 +++++++++++-------
2 files changed, 53 insertions(+), 42 deletions(-)
diff --git a/examples/carousel.html b/examples/carousel.html
index b74fb72e..347e737c 100644
--- a/examples/carousel.html
+++ b/examples/carousel.html
@@ -68,54 +68,56 @@ div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
layui.use('carousel', function(){
var carousel = layui.carousel;
- //建造实例
- carousel.render({
- elem: '#test1'
- ,index: 2
- //,full: true
- ,arrow: 'always'
- ,autoplay: 'always'
- ,change: function(obj){
+ // 实例
+ var carInst = carousel.render({
+ elem: '#test1',
+ index: 2,
+ // full: true,
+ arrow: 'always',
+ autoplay: 'always',
+ change: function(obj) {
console.log(obj)
- }
- //,interval: 5000
- //,autoplay: false
- //,indicator: 'outside'
- //,trigger: 'hover'
+ },
+ // interval: 5000,
+ // autoplay: false,
+ // indicator: 'outside',
+ // trigger: 'hover'
});
+
+ // carInst.goto(1);
- //事件
+ // 事件
/*
- carousel.on('change(test1)', function(obj){
+ carousel.on('change(test1)', function(obj) {
console.log(obj)
});
*/
carousel.render({
- elem: '#test2'
- ,interval: 1800
- //,full: true
- ,anim: 'fade'
- ,height: '120px'
+ elem: '#test2',
+ interval: 1800,
+ // full: true,
+ anim: 'fade',
+ height: '120px'
});
carousel.render({
- elem: '#test3'
- //,full: true
- ,arrow: 'always'
- //,autoplay: false
- //,indicator: 'outside'
- //,trigger: 'hover'
- ,anim: 'updown'
- //,full: true
+ elem: '#test3',
+ // full: true,
+ arrow: 'always',
+ // autoplay: false,
+ // indicator: 'outside',
+ // trigger: 'hover',
+ anim: 'updown',
+ // full: true
});
// 图片轮播
carousel.render({
- elem: '#test4'
- ,width: '720px'
- ,height: '360px'
- ,interval: 5000
+ elem: '#test4',
+ width: '720px',
+ height: '360px',
+ interval: 5000
});
});
diff --git a/src/modules/carousel.js b/src/modules/carousel.js
index e55abdb6..ee24b779 100644
--- a/src/modules/carousel.js
+++ b/src/modules/carousel.js
@@ -113,13 +113,14 @@ layui.define(['jquery', 'lay'], function(exports){
// 初始焦点状态
that.elemItem.eq(options.index).addClass(THIS);
- // 指示器等动作
- if(that.elemItem.length <= 1) return;
-
+ // 指示器、箭头等动作
that.indicator();
that.arrow();
that.autoplay();
- that.events();
+
+ if (that.elemItem.length > 1) {
+ that.events();
+ }
};
// 重置轮播
@@ -188,19 +189,23 @@ layui.define(['jquery', 'lay'], function(exports){
Class.prototype.autoplay = function(){
var that = this;
var options = that.config;
+ var itemsCount = that.elemItem.length;
if(!options.autoplay) return;
clearInterval(that.timer);
- that.timer = setInterval(function(){
- that.slide();
- }, options.interval);
+ if (itemsCount > 1) {
+ that.timer = setInterval(function(){
+ that.slide();
+ }, options.interval);
+ }
};
// 箭头
Class.prototype.arrow = function(){
var that = this;
var options = that.config;
+ var itemsCount = that.elemItem.length;
// 模板
var tplArrow = $([
@@ -215,7 +220,7 @@ layui.define(['jquery', 'lay'], function(exports){
if(options.elem.find('.'+ELEM_ARROW)[0]){
options.elem.find('.'+ELEM_ARROW).remove();
}
- options.elem.append(tplArrow);
+ itemsCount > 1 ? options.elem.append(tplArrow) : tplArrow.remove();
// 事件
tplArrow.on('click', function(){
@@ -241,6 +246,7 @@ layui.define(['jquery', 'lay'], function(exports){
Class.prototype.indicator = function(){
var that = this;
var options = that.config;
+ var itemsCount = that.elemItem.length;
// 模板
var tplInd = that.elemInd = $(['
',
@@ -260,7 +266,8 @@ layui.define(['jquery', 'lay'], function(exports){
if(options.elem.find('.'+ELEM_IND)[0]){
options.elem.find('.'+ELEM_IND).remove();
}
- options.elem.append(tplInd);
+
+ itemsCount > 1 ? options.elem.append(tplInd) : tplInd.remove();
if(options.anim === 'updown'){
tplInd.css('margin-top', -(tplInd.height()/2));
@@ -276,11 +283,12 @@ layui.define(['jquery', 'lay'], function(exports){
Class.prototype.slide = function(type, num){
var that = this;
var elemItem = that.elemItem;
+ var itemsCount = elemItem.length;
var options = that.config;
var thisIndex = options.index;
var filter = options.elem.attr('lay-filter');
- if(that.haveSlide) return;
+ if (that.haveSlide || itemsCount <= 1) return;
// 滑动方向
if(type === 'sub'){
@@ -329,6 +337,7 @@ layui.define(['jquery', 'lay'], function(exports){
var options = that.config;
if(options.elem.data('haveEvents')) return;
+
// 移入移出容器
options.elem.on('mouseenter touchstart', function(){
--
Gitee
From 829bedc7064da1a16e443536d2915a95d953f29a Mon Sep 17 00:00:00 2001
From: sunxiaobin89 <285584806@qq.com>
Date: Fri, 26 Jul 2024 22:34:46 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat(element-tab):=20=E6=96=B0=E5=A2=9E=20t?=
=?UTF-8?q?ab=20=E5=88=87=E6=8D=A2=E5=89=8D=E7=9A=84=E4=BA=8B=E4=BB=B6=20(?=
=?UTF-8?q?#2111)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat(element-tab): 新增 tab 切换前的事件
* feat(element-tab): 优化 tabChange 添加 skipBeforeChange 参数
* docs(element-tab): 更新 tabChange 和 tabBeforeChange 相关文档
* Update docs/tab/index.md
* Update docs/tab/index.md
* Update docs/tab/index.md
* Update docs/tab/index.md
* chore: 修改名称一致及优化注释
---------
Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
---
docs/tab/index.md | 32 +++++++++++++++++++++++++++++---
src/modules/element.js | 30 +++++++++++++++++++++++++++---
2 files changed, 56 insertions(+), 6 deletions(-)
diff --git a/docs/tab/index.md b/docs/tab/index.md
index e97e7850..22d41e10 100644
--- a/docs/tab/index.md
+++ b/docs/tab/index.md
@@ -111,7 +111,7 @@ tab 组件提供了三种 UI 风格,分别为:
| [element.render(\'tab\', filter)](#element.render) | 渲染 tab 组件 |
| [element.tabAdd(filter, options)](#element.tabAdd) | 添加 tab 选项 |
| [element.tabDelete(filter, layid)](#element.tabDelete) | 删除 tab 选项 |
-| [element.tabChange(filter, layid)](#element.tabChange) | 切换 tab 选项 |
+| [element.tabChange(filter, layid, force)](#element.tabChange) | 切换 tab 选项 |
| [element.tab(options)](#element.tab) | 绑定自定义 tab 元素 |
元素属性
@@ -207,10 +207,11 @@ layui.use(function(){
切换 tab
-`element.tabChange(filter, layid);`
+`element.tabChange(filter, layid, force);`
- 参数 `filter` : tab 容器(`class="layui-tab"`)的 `lay-filter` 属性值
- 参数 `layid` : 选项卡标题元素的 `lay-id` 属性值
+- 参数 `force` : 是否强制执行 tab 切换。设置 `true` 后,将忽略 `tabBeforeChange` 事件行为。默认 `false` 2.9.15+
该方法用于切换到对应的 tab 选项。用法详见 : [#示例](#examples)
@@ -290,6 +291,31 @@ element.on('tab(filter)', function(data){
});
```
+tab 切换前的事件 2.9.15+
+
+`element.on('tabBeforeChange(filter)', callback);`
+
+- 参数 `tabBeforeChange(filter)` 是一个特定结构。
+ - `tabBeforeChange` 为 tab 切换前事件固定值;
+ - `filter` 为 tab 容器属性 `lay-filter` 对应的值。
+- 参数 `callback` 为事件执行时的回调函数,并返回一个 `object` 类型的参数。
+
+点击 tab 选项切换前触发。
+
+```
+var element = layui.element;
+
+// tab 切换前的事件
+element.on('tabBeforeChange(filter)', function(data){
+ console.log(data.elem); // 得到当前的 tab 容器
+ console.log(data.from.index); // 得到切换前的 tab 项所在下标
+ console.log(data.from.id); // 得到切换前的 tab 项所在ID
+ console.log(data.to.index); // 得到切换后的 tab 项所在下标
+ console.log(data.to.id); // 得到切换后的 tab 项所在ID
+
+ if(data.to.id === 'home') return false; // 返回 false 时阻止切换到对应的选项卡
+});
+```
tab 删除事件
@@ -318,7 +344,7 @@ element.on('tabDelete(filter)', function(data){
`element.on('tabBeforeDelete(filter)', callback);`
- 参数 `tabBeforeDelete(filter)` 是一个特定结构。
- - `tabBeforeDelete` 为 tab 删除事件固定值;
+ - `tabBeforeDelete` 为 tab 删除前事件固定值;
- `filter` 为 tab 容器属性 `lay-filter` 对应的值。
- 参数 `callback` 为事件执行时的回调函数,并返回一个 `object` 类型的参数。
diff --git a/src/modules/element.js b/src/modules/element.js
index d083c360..ddc9eddc 100644
--- a/src/modules/element.js
+++ b/src/modules/element.js
@@ -66,14 +66,21 @@ layui.define('jquery', function(exports){
return this;
};
- // 外部 Tab 切换
- Element.prototype.tabChange = function(filter, layid){
+ /**
+ * 外部 Tab 切换
+ * @param {string} filter - 标签主容器 lay-filter 值
+ * @param {string} layid - 标签头 lay-id 值
+ * @param {boolean} force - 是否强制切换
+ * @returns {this}
+ */
+ Element.prototype.tabChange = function(filter, layid, force){
var tabElem = $('.layui-tab[lay-filter='+ filter +']');
var titElem = tabElem.children(TITLE);
var liElem = titElem.find('>li[lay-id="'+ layid +'"]');
call.tabClick.call(liElem[0], {
- liElem: liElem
+ liElem: liElem,
+ force: force
});
return this;
};
@@ -140,6 +147,23 @@ layui.define('jquery', function(exports){
var index = 'index' in obj
? obj.index
: othis.parent().children('li').index(othis);
+
+ // 若非强制切换,则根据 tabBeforeChange 事件的返回结果决定是否切换
+ if (!obj.force) {
+ var liThis = othis.siblings('.' + THIS);
+ var shouldChange = layui.event.call(this, MOD_NAME, 'tabBeforeChange('+ filter +')', {
+ elem: parents,
+ from: {
+ index: othis.parent().children('li').index(liThis),
+ id: liThis.attr('lay-id')
+ },
+ to: {
+ index: index,
+ id: hasId
+ },
+ });
+ if(shouldChange === false) return;
+ }
// 执行切换
if(!(isJump || unselect)){
--
Gitee
From 6a23ada7d3c0250332833b041cceb6a3cc654de1 Mon Sep 17 00:00:00 2001
From: morning-star <26325820+Sight-wcg@users.noreply.github.com>
Date: Fri, 26 Jul 2024 23:29:25 +0800
Subject: [PATCH 3/8] =?UTF-8?q?feat(form-select):=20=E6=94=B9=E8=BF=9B=20l?=
=?UTF-8?q?ay-search=20=E5=B1=9E=E6=80=A7=EF=BC=8C=E6=94=AF=E6=8C=81?=
=?UTF-8?q?=E8=AE=BE=E7=BD=AE=E3=80=8C=E6=98=AF=E5=90=A6=E5=A4=A7=E5=B0=8F?=
=?UTF-8?q?=E5=86=99=E6=95=8F=E6=84=9F=E3=80=8D=E5=92=8C=E3=80=8C=E6=A8=A1?=
=?UTF-8?q?=E7=B3=8A=E6=90=9C=E7=B4=A2=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
feat(form-select): 弃用 `lay-search="cs"`,新增 `lay-search="{caseSensitive:false, fuzzy: false}"` 方式 (#2121)
---
docs/form/index.md | 2 +-
src/modules/form.js | 28 ++++++++++++++++++----------
2 files changed, 19 insertions(+), 11 deletions(-)
diff --git a/docs/form/index.md b/docs/form/index.md
index cac7d0d1..a364710a 100644
--- a/docs/form/index.md
+++ b/docs/form/index.md
@@ -116,7 +116,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
| lay-reqtext | 自定义 | 设置*必填项*(`lay-verify="required"`)的默认提示文本 |
| lay-affix | [#详见](input.html#affix) | 输入框动态点缀,``元素 **私有属性** |
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 ``,`` 元素 **私有属性** |
-| lay-search | 默认不区分大小写;
设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`