popover弹框如何修改宽度,让其跟slot的宽度保持一致

1,235 阅读1分钟

一、如何设置popover的宽度? 1、通过popover的width属性,不过要注意此属性需要动态绑定才会生效,即:width="变量" 2、通过css来改popover的width(需要在根样式文件中修改,因为popover和App.vue的div同级)

二、如何让popover的宽度和slot的宽度始终保持一致

<template>
    <el-popover :width="cSelectDom.offsetWidth">
        ...具体的内容
        <div ref="cselect" slot="reference"></div>
    </el-popover>
</template>
<script>
    export default{
        data(){
            return {
                cSelectDom: ""
            }
        },
        mounted() {
            // 获取popover元素
            this.$nextTick(() => {
                this.cSelectDom = this.$refs.cselect
                console.log('cSelectDom',this.cSelectDom.offsetWidth); //打印出slot的宽度
            })
        },
    }
</script>