修改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>
相关推荐
半兽先生18 小时前
解决使用jsPDF实现表格数据导出pdf功能时中文乱码问题
前端·vue.js·elementui
大阳光男孩2 天前
ElementUI表格懒加载子级更新数据刷新不生效问题
前端·javascript·elementui
i_am_a_div_日积月累_2 天前
el-drawer注册全局点击事件无效;el-dialog注册全局点击事件无效
javascript·vue.js·elementui
Filotimo_5 天前
Vue3 + Element Plus 表格复选框踩坑记录
javascript·vue.js·elementui
小救星小杜、6 天前
el-form 表格校验 开始和结束时间,时间选择范围
javascript·vue.js·elementui
克里斯蒂亚诺更新6 天前
使用elementUI的表格报错ResizeObserver loop completed with undelivered notifications.
前端·javascript·elementui
qiqiliuwu6 天前
VUE3+TS+ElementUI项目中监测页面滚动scroll事件以及滚动高度不生效问题的解决方案(window.addEventListener)
前端·javascript·elementui·typescript·vue
Java程序员-小白6 天前
Sa-Token过滤器引发的CORS误判问题
vue.js·elementui·axios·cors
梁山好汉(Ls_man)7 天前
JS_使用脚本填充基于Vue的用户名密码输入框并触发登录
javascript·elementui·vue
Irene19917 天前
Tailwind CSS vs Bootstrap vs ElementUI(ElementPlus) 全面对比表
elementui·bootstrap·element plus·tailwind css