cube-ui dialog嵌套slide遇到的問題

前言

dialog去嵌套slide的場景確實很少。不過仍是嘗試了一下。

問題

自定義了一個 TestDialog

<!--
 * @Description: cube-ui 嵌套 cube-slide
 * @Author: lxc
 * @Date: 2019-07-30 08:09:22
 * @LastEditTime: 2019-09-06 14:35:32
 * @LastEditors: lxc
 -->
<template>
  <transition name="cube-dialog-fade">
    <cube-popup
      ref="myPopup"
      type="dialog"
      :mask="true"
      :center="true"
      :visible="true"
      class="popup"
      @mask-click="hideDialog"
    >
      <div class="dialog-main">
        <div>測試</div>
        <div class="test">
          <cube-slide ref="mySlide" :data="items" />
        </div>
      </div>
    </cube-popup>
  </transition>
</template>

<script>
export default {
  name: 'TestDialog',
  props: {
    items: {
      type: Array,
      default: null
    }
  },
  mounted() {
    console.log('mounted')
    /* const vm = this
    this.$nextTick(function() {
      vm.$refs.mySlide.refresh()
    }) */
  },
  methods: {
    hideDialog(e) {
      this.$refs.myPopup.hide()
    },
    // 必須寫在這裏
    show() {
      this.$refs.myPopup.show()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/color';

.popup {
  width: 100%;

  .dialog-main {
    width: 20rem;
    padding: 1rem;
    overflow: hidden;
    border-radius: 0.2rem;
    background-color: white;

    .test {
      width: 100%;
    }
  }
}
</style>
複製代碼

卻發現並不能正常的顯示slide 如：下圖

解決

初始化的時候的寬高slide並不知道父級元素何時從display none 到了可見狀態 因此裏邊的內容不對 與官方cube-ui交流羣探討，獲得了幫助，解決了該問題。 感謝 cube-苗典

mounted() {
    console.log('mounted')
    const vm = this
    this.$nextTick(function() {
      vm.$refs.mySlide.refresh()
    })
  },
複製代碼

刷新了slide以後顯示就正常了。 在此記錄一下。但願有遇到相同問題的同窗獲得幫助。