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

2020-10-16 02:20:32 3.5k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

weixin_40813937 墨衍会员 · AI 创作全网分发关注 + 加入社区

Vue-cli 4.5 vue ui 脚手架配置Elemnt-plus 中el-row el-col无法生效的解决方案 Vue脚手架配置Elemnt-ui无法生效的解决方案欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢阅读详情

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

...全文