美文网首页
修改el-dropdown下拉框的样式,没有效果,所以将el-d

修改el-dropdown下拉框的样式,没有效果,所以将el-d

作者: 稀释1 | 来源:发表于2022-04-13 17:46 被阅读0次

1.项目中遇到点击页面中其他的地方关闭窗口,但是遇到一个问题el-dropdown元素是写在body里面

2.因此点击el-dropdown的下拉框时窗口就关闭了

所以我们需要把它写在窗口的div里面,在这里用到一个方法

<template>
    <div>
        <el-dropdown>
            <span class="el-dropdown-link">
                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <!--同样是将append-to-body参数设置为false-->
            <el-dropdown-menu slot="dropdown" :append-to-body="false" ref="downdiv">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div ref="newSpace"></div>
    </div>
</template>
<script>
    export default {
        mounted() {
            this.$refs.newSpace.appendChild(
                this.$refs.downdiv.popperElm
            )
        }
    }
</script>

相关文章

网友评论

      本文标题:修改el-dropdown下拉框的样式,没有效果,所以将el-d

      本文链接:https://www.haomeiwen.com/subject/pvbasrtx.html