mirror of
https://gitee.com/layui/layui.git
synced 2025-11-24 08:33:12 +08:00
fix(dropdown): 修复 show: true 时 render 重复执行的问题 (#2946)
* fix(dropdown):show=true时多次回调ready函数临时解决办法 * fix: 优化文档 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
This commit is contained in:
@@ -2,39 +2,40 @@
|
||||
自定义内容
|
||||
<i class="layui-icon layui-icon-list layui-font-14"></i>
|
||||
</button>
|
||||
|
||||
|
||||
<style>
|
||||
.demo-dropdown-tabs{padding: 0 16px;}
|
||||
.demo-dropdown-tabs{padding: 11px 16px 0;}
|
||||
</style>
|
||||
|
||||
<!-- import layui -->
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
layui.use(function() {
|
||||
var dropdown = layui.dropdown;
|
||||
var tabs = layui.tabs;
|
||||
|
||||
// 自定义内容
|
||||
dropdown.render({
|
||||
elem: '#ID-dropdown-demo-content',
|
||||
content: ['<div class="layui-tab layui-tab-brief">',
|
||||
'<ul class="layui-tab-title">',
|
||||
'<li class="layui-this">Tab header 1</li>',
|
||||
'<li>Tab header 2</li>',
|
||||
'<li>Tab header 3</li>',
|
||||
content: ['<div class="layui-tabs">',
|
||||
'<ul class="layui-tabs-header">',
|
||||
'<li class="layui-this">Tab Header1</li>',
|
||||
'<li>Tab Header2</li>',
|
||||
'<li>Tab Header3</li>',
|
||||
'</ul>',
|
||||
'<div class="layui-tab-content">',
|
||||
'<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 属性中传入任意的 html 内容,可替代默认的下拉菜单结构,从而实现更多有趣的弹出内容。</p><p> 是否发现,dropdown 组件不仅仅只是一个下拉菜单或者右键菜单,它能被赋予许多的想象可能。</p></div>',
|
||||
'<div class="layui-tab-item">Tab body 2</div>',
|
||||
'<div class="layui-tab-item">Tab body 3</div>',
|
||||
'<div class="layui-tabs-body">',
|
||||
'<div class="layui-tabs-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 属性中传入任意的 html 内容,可替代默认的下拉菜单结构,从而实现更多有趣的弹出内容。</p><p> 是否发现,dropdown 组件不仅仅只是一个下拉菜单或者右键菜单,它能被赋予许多的想象可能。</p></div>',
|
||||
'<div class="layui-tabs-item">Tab Content2</div>',
|
||||
'<div class="layui-tabs-item">Tab Content3</div>',
|
||||
'</div>',
|
||||
'</div>'].join(''),
|
||||
className: 'demo-dropdown-tabs',
|
||||
style: 'width: 370px; height: 200px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);',
|
||||
style: 'width: 390px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);',
|
||||
// shade: 0.3, // 弹出时开启遮罩 --- 2.8+
|
||||
ready: function(){
|
||||
layui.use('element', function(element){
|
||||
element.render('tab');
|
||||
ready: function(elem) {
|
||||
tabs.render({
|
||||
elem: elem.find('.layui-tabs')
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -182,8 +182,10 @@ layui.define(['i18n', 'jquery', 'laytpl', 'lay', 'util'], function (exports) {
|
||||
)
|
||||
that.render(type);
|
||||
|
||||
// 事件
|
||||
that.events();
|
||||
// 若面板已经打开,则无需再绑定目标元素事件,避免 render 重复执行
|
||||
if (!elem.data(MOD_INDEX_OPENED)) {
|
||||
that.events(); // 事件
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染
|
||||
|
||||
Reference in New Issue
Block a user