請教大佬，我在按照例子使用抽屜組建。本來是點擊一下打開，可是界面上是直接打開的。
我看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>
uj5u.com熱心網友回復：
樣式沒引入完全。。。你把element的css檔案引入再試試列uj5u.com熱心網友回復：
是不是沒有全域引入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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/175568.html
標籤：JavaScript