vue 用better-scroll或者cube-ui的scroll组件用在弹框时要注意的事项

最新推荐文章于 2024-07-31 17:35:32 发布

原创最新推荐文章于 2024-07-31 17:35:32 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在Vue项目中，如何通过绑定特定样式解决子节点弹框显示时的高度问题。利用display:table属性激活子节点高度，确保弹框正确显示，并附带示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子节点弹框时，激活子节点的高度，所以在子节点处绑定一个样式，display:table来激活高度，具体代码如下

<template>
    <cube-popup type="my-popup" ref="myPopup">
     <div class="scroll-list-wrap">
      <cube-scroll
        ref="scroll">
       <div class="aa" :class={'abcd':ac}>
        
       </div>
    </cube-scroll>
   </div>
 </cube-popup>

  <cube-button @click="showPopup('myPopup')">
     Show Popup
  </cube-button>
</template>
<script>

    export default {
        name: "Demo",
     
        data(){
            return{
                ac:false
            }
        },
       methods: {
         showPopup(refId) {
              const component = this.$refs[refId]
              component.show()
              setTimeout(() => {
                component.hide()
              }, 1000)
            }
          }

        mounted(){
          setTimeout(()=> {
               // this.$refs['myPopup'].show();//激活弹框
                 this.ac=true
                console.log(1);
            }, 10)
        }

    }
<style>
.scroll-list-wrap {height: 350px}
.aa{width:100%; height:400px; background:red}
.abcd{display:table}
</style>