在写自定义div弹窗的时候,实现类似el-dlaig打开关闭的效果。
showDialog的时候 div怎么也打不开,并且页面中也没有插入那块dom;
dialogVisible默认是true的时候是能正常展示div的
解决办法:类似el-dlalog的appen-to-body属性
找到对应源码
CV一下
成功解决!
javascript
<!--
* @Description: 百度地图点聚合点位详情弹窗 页面
* @Author: mhf
* @Date: 2024/9/29 13:37
-->
<template>
<div class="bd-cluster-detail-dialog" v-if="dialogVisible">
详情
<el-button type="primary" @click="hideDialog">buttonCont</el-button>
</div>
</template>
<script>
export default {
name: "bdClusterDetailDialog",
components: {},
props: {
},
data() {
return {
dialogVisible: false,
};
},
methods: {
showDialog(data) {
this.$message.success("打开")
this.dialogVisible = true
document.body.appendChild(this.$el);
},
hideDialog() {
this.dialogVisible = false;
},
},
created() {
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
.bd-cluster-detail-dialog {
width: 400px;
height: 600px;
border: 1px solid red;
z-index: 20000 !important;
position: absolute;
right: 100px;
top: 100px;
}
</style>