Simplebar-vue在模态中不工作

Question

我正在使用Vuejs做一个小项目，我有一些分期付款的简单条-vue-它工作得很好，但不是在一个模式内。

这是我的密码：

<b-modal v-model="showRightBar" title="Add Contact" modal-class="right">
        <simplebar class="h-100">
          <div style="height:500px;">hello</div>
        </simplebar>
</b-modal>

这是我为这个模式定制的css，也是：

    .modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 420px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}
.modal.right .modal-body {
    padding: 15px 15px 80px;
}   
/*Right*/
.modal.right.fade .modal-dialog {
    right: 0;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}

的问题是:我没有看到滚动条

顺便说一句，简单条在模态之外工作得很好。(引导-vue)谢谢你提前提供帮助

Answer 1

打开时附加在主体元素上的模态，关闭时附加于主体元素的模态。因此，在显示模态时，需要使用实例。

<b-modal v-model="showRightBar" title="Add Contact" modal-class="right" @shown="handleShown">
    <simplebar ref="simplebar" class="h-100">
        <div style="height:500px;">hello</div>
    </simplebar>
</b-modal>

在b-模式上使用@显示处理程序。https://bootstrap-vue.org/docs/components/modal#comp-ref-b-modal-events

handleShown() {
   new SimpleBar(this.$refs.simplebar)
}

codepen上的工作示例：https://codepen.io/corresponding/pen/xxYQQVJ

Answer 2

尝试将VueJs 3与Bootstrap 5一起使用更好