前言
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 如：下图
问题.png
解决
初始化的时候的宽高slide并不知道父级元素什么时候从display none 到了可见状态 所以里边的内容不对
与官方cube-ui交流群探讨，得到了帮助，解决了该问题。
感谢 cube-苗典
mounted() {
console.log('mounted')
const vm = this
this.$nextTick(function() {
vm.$refs.mySlide.refresh()
})
},
刷新了slide之后显示就正常了。 在此记录一下。希望有遇到相同问题的同学得到帮助。
