element-ui中drawer的简易使用介绍，重点介绍调整drawer宽度

原创已于 2023-05-22 14:55:34 修改 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #css3

于 2023-05-22 14:52:40 首次发布

element-ui 专栏收录该内容

1 篇文章

订阅专栏

文章展示了如何在Vue应用中利用ElementUI库的el-button组件打开Drawer，并通过visible.sync属性控制Drawer的显示状态。同时，通过设置size属性动态调整Drawer的宽度，实现自定义宽度的Drawer，内容可包含表单、列表或图表等。

我们通过el-button来显示Drawer，通过visible.sync来控制Drawer的显示状态。通过设置size属性来调整Drawer的宽度。

<template>
  <div>
    <el-button @click="showDrawer = true">打开Drawer</el-button>
    <el-drawer
      title="Drawer标题"
      :visible.sync="showDrawer"
      :size="drawerWidth"
    >
      <p>这里是Drawer的内容</p>
      <p>可以放置一些表单、列表、图表等内容</p>
      <p>通过调整drawerWidth可以改变Drawer的宽度</p>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showDrawer: false, // Drawer是否显示
      drawerWidth: '60%' // Drawer宽度
    }
  }
}
</script>