tuniaoTech / tuniaoui-rc-vue3-uniapp

图鸟UI vue3 uniapp源码 uniapp 组件库
Other
253 stars 34 forks source link

TnCollapse在TnPopup中使用,内容显示不出来,页面会出现闪烁,并残留上一个页面的内容 #123

Open wzmcoding opened 3 months ago

wzmcoding commented 3 months ago

image

页面会闪烁,内容没出来。 代码如下:

const currentCollapse = ref<number>()
const collapseData = [
  {
    title: '关雎',
    content:
      '关关雎鸠,在河之洲。窈窕淑女,君子好逑。参差荇菜,左右流之。窈窕淑女,寤寐求之。求之不得,寤寐思服。悠哉悠哉,辗转反侧。参差荇菜,左右采之。窈窕淑女,琴瑟友之。参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。',
  },
  {
    title: '长歌行',
    content:
      '青青园中葵,朝露待日晞。阳春布德泽,万物生光辉。常恐秋节至,焜黄华叶衰。百川东到海,何时复西归?少壮不努力,老大徒伤悲!',
  },
  {
    title: '秋风辞',
    content:
      '秋风起兮白云飞,草木黄落兮雁南归。兰有秀兮菊有芳,怀佳人兮不能忘。泛楼船兮济汾河,横中流兮扬素波。少壮几时兮奈老何!',
  },
]

<TnPopup v-model="visible" width="95%" @close="cancel" open-direction="bottom">
      <!--  -->
      <TnCollapse v-model="currentCollapse">
        <TnCollapseItem
          v-for="(item, index) in collapseData"
          :key="index"
          :title="item.title"
        >
          {{ item.content }}
        </TnCollapseItem>
      </TnCollapse>
</TnPopup>