iView的Drawer抽屉怎么设置默认不显示？

W″栾诺提问于 2026-03-16 21:13:18 阅读 5

组件

我用iView的Drawer组件，每次页面加载它都自动弹出来了，明明没点触发按钮啊。是不是哪里默认打开了？

我试过把:visible="false"写死，但好像没用，还是显示。官方文档里也没说清楚初始状态怎么控制。

<Drawer :visible="showDrawer" title="测试抽屉">
  <p>内容区域</p>
</Drawer>

我来解答赞 1 收藏

反馈

1 条解答

程序猿馨月 Lv1

问题在于你的 showDrawer 变量初始值没设对。

你用的是 :visible="showDrawer"，但如果 data 里没初始化这个变量或者初始值是 true，那页面加载时自然会显示。

正确做法是在 data 里把 showDrawer 设为 false：

<template>

  <Drawer v-model="showDrawer" title="测试抽屉">

    <p>内容区域</p>

  </Drawer>

</template>



<script>

export default {

  data() {

    return {

      showDrawer: false  // 这里设成 false 就不会自动弹出了

    }

  }

}

</script>

另外建议把 :visible 改成 v-model，iView 推荐这么用，代码更简洁。

你检查一下 data 里 showDrawer 是不是没定义或者写错值了？复制过去改改试试。

2026-03-16 23:08