【VUE+elemnt UI】各位大佬,请教下el-drawer抽屉组建,为什么是直接打开的?

weixin_40813937 2020-10-16 02:20:32
请教大佬,我在按照例子使用抽屉组建。本来是点击一下打开,可是界面上是直接打开的。
我看visible初始值已经是false了。
百思不得其解。




源代码:

<template>
<div calss="container">
<el-header>
<el-button type="primary" style="margin-left: 16px;" @click="visible = true">
点我打开
</el-button>
</el-header>
<el-main>
<el-drawer
title="我是标题"
:visible.sync="visible"
:with-header=false
style="position: absolute"
direction="ltr"
z-index="-1"
>
<span>我是抽屉组件</span>
</el-drawer>
<h1>Body</h1>
</el-main>
</div>
</template>

<script>
// @ is an alias to /src

export default {
name: 'main',
data() {
return {
visible: false,
};
},
methods: {
handleClose(done) {
done()
}
}
}
</script>
<style>
.el-header {
color: #333;
padding: 0 !important;
height: 50px!important;
background: antiquewhite;
}

.el-main {
height: 100%;
padding: 0!important;
overflow: hidden;
position: relative;
}
</style>
...全文
3417 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
Logerlink 2020-10-16
  • 打赏
  • 举报
回复
是不是没有全局引入element-ui 代码改了一下,正常打开是这样的

<template>
    <div calss="container">
        <el-button type="primary" style="margin-left: 16px;"  @click="visible = true">
                点我打开
            </el-button>
        <el-drawer
                    title="我是标题"
                    :visible.sync="visible"
                    :with-header=false
                    style="position: absolute"
                    direction="ltr"
                    z-index="-1"
            >
                <span>我是抽屉组件</span>
            </el-drawer>
            <h1>Body</h1>
    </div>
</template>
<script>
    // @ is an alias to /src
 
    export default {
        data() {
            return {
                visible: false,
            };
        },
        methods: {
            handleClose(done) {
                done()
            }
        }
    }
</script>
FLTmiao 2020-10-16
  • 打赏
  • 举报
回复
样式没引入完全。。。你把element的css文件引入再试试列

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧