修改element的抽屉<el-drawer的宽度

Drawer 抽屉

有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.

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

bash 复制代码
<el-drawer
  title="我是标题"
  :visible.sync="drawer"
   :size="drawerWidth"
  :with-header="false">
  <span>我来啦!</span>
</el-drawer>
<script>
export default {
  data() {
    return {
      drawerWidth: '60%' // Drawer宽度
    }
  }
}
</script>
相关推荐
迂 幵12 小时前
vue el-table 超出隐藏移入弹窗显示
javascript·vue.js·elementui
J总裁的小芒果1 天前
el-table中增加校验方法(二)
javascript·vue.js·elementui
青龙摄影1 天前
【自动化】学习观看视频内容,无需人为干预
前端·vue.js·elementui
J总裁的小芒果1 天前
el-form el-table 前端排序+校验+行编辑
前端·vue.js·elementui
会发光的猪。1 天前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒1 天前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
竹秋…2 天前
element-plus <el-date-picker>日期选择器踩坑!!!!
javascript·vue.js·elementui
四喜花露水2 天前
vue2.x elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局
前端·elementui·vue
会发光的猪。2 天前
vue3中ElementPlus引入下载icon图标不显示透明问题解决教程方法
javascript·vue.js·elementui·前端框架
alexbai!2 天前
el-date-picker picker-options属性中disabledDate设置时间的禁用和启用,并且支持到时分秒的禁用和启用
javascript·vue.js·elementui