theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: transition collapse 动画根元素无法设置内边距

Browse Source
This commit is contained in:
就眠儀式 2022-03-19 21:42:31 +08:00
parent 947579a059
commit fda2d11b20
4 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
example/docs/zh-CN/components/transition.md
View File

@ -17,9 +17,13 @@
<br/> <br/>
<br/> <br/>
<lay-transition> <lay-transition>
<div v-show="visible"> <div v-show="visible" style="width:300px;background: #79C48C;border-radius: 4px;padding:20px;">
<ul style="width:300px;background: #79C48C;border-radius: 4px;height:200px;"> <li>1</li>
</ul> <li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</div> </div>
</lay-transition> </lay-transition>
</template> </template>

1
src/component/collapseItem/index.less
View File

@ -23,7 +23,6 @@
} }
.layui-colla-content { .layui-colla-content {
display: none;
padding: 10px 15px; padding: 10px 15px;
line-height: 1.6; line-height: 1.6;
color: #666; color: #666;

18
src/component/collapseItem/index.vue
View File

@ -39,11 +39,7 @@ const showHandle = function () {
// 普通折叠面板 --> 展开 // 普通折叠面板 --> 展开
activeValues.value.push(props.id); activeValues.value.push(props.id);
} }
emit("update:modelValue",accordion ? activeValues.value[0] || null : activeValues.value);
emit(
"update:modelValue",
accordion ? activeValues.value[0] || null : activeValues.value
);
emit("change", props.id, !_isShow, activeValues.value); emit("change", props.id, !_isShow, activeValues.value);
}; };
</script> </script>
@ -57,10 +53,12 @@ const showHandle = function () {
<slot name="title" :props="props">{{ title }}</slot> <slot name="title" :props="props">{{ title }}</slot>
<i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i> <i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
</h2> </h2>
<div class="layui-colla-content" :class="isShow ? 'layui-show' : ''"> <lay-transition>
<p> <div class="layui-colla-content" v-if="isShow">
<slot :props="props"></slot> <p>
</p> <slot :props="props"></slot>
</div> </p>
</div>
</lay-transition>
</div> </div>
</template> </template>

3
src/component/transition/index.vue
View File

@ -58,7 +58,8 @@ const beforeLeave = (el: any) => {
el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom; el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow; el.dataset.oldOverflow = el.style.overflow;
el.style.height = el.scrollHeight + "px"; var computedStyle = getComputedStyle(el, null);
el.style.height = el.scrollHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom) + "px";
el.style.overflow = "hidden"; el.style.overflow = "hidden";
}; };