jdf2e / nutui

京东风格的移动端 Vue 组件库,支持多端小程序(A Vue.js UI Toolkit for Mobile Web)
https://nutui.jd.com
MIT License
6.09k stars 827 forks source link

[bug]nut-collapse-item 内容高度动态增加时无法完全展示 #909

Closed inooNgt closed 2 years ago

inooNgt commented 2 years ago

问题描述

nut-collapse-item 的高度固定,不会随着内容的变化而变化,导致内容高度动态增加时无法完全展示

最小可复现仓库

请创建最小可复现代码,并上传到你的 GitHub 仓库

预期的行为和实际行为

内容高度动态增加时可以完全展示

复现步骤,具体代码

<template>
  <nut-collapse v-model:active="activeNames" icon="down-arrow">
    <nut-collapse-item :name="1">
      <template v-slot:mTitle>
        {{ title1 }}
      </template>
      NutUI是一套拥有京东风格的轻量级的 Vue 组件库
      <view v-if="showMore">
        引入Vue3新特性 Composition API、Teleport、Emits 等
      </view>
    </nut-collapse-item>
    <nut-collapse-item :title="title2" :name="2">
      在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级!
    </nut-collapse-item>
    <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
  </nut-collapse>
</template>

<script>
import { reactive, toRefs, ref } from 'vue';
export default {
  setup() {
    const activeNames = reactive([1, 2]);
    const title = reactive({
      title1: '标题1',
      title2: '标题2',
      title3: '标题3'
    });
    let showMore = ref(false);
    setTimeout(() => {
      showMore.value = true;
    }, 1000);
    return {
      activeNames,
      showMore,
      ...toRefs(title)
    };
  }
};
</script>

相关环境信息

Ymm0008 commented 2 years ago

感谢您的反馈,问题已修复,将在下个版本发布。 @inooNgt