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

[weixin_40813937]

请教大佬，我在按照例子使用抽屉组建。本来是点击一下打开，可是界面上是直接打开的。
我看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>

[FLTmiao]

样式没引入完全。。。你把element的css文件引入再试试列

[Logerlink]

是不是没有全局引入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>