修改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>
相关推荐
清风细雨_林木木25 分钟前
Css样式中设置gap: 12px以后左右出现距离问题解析
css·vue.js·elementui
Nymph_Zhu17 小时前
vue3+element-plus el-date-picker日期、年份筛选设置本周、本月、近3年等快捷筛选
前端·vue.js·elementui
weixin_4386943917 小时前
el-table设置自定义css
css·elementui
GISer_Jing2 天前
[低代码表单生成器设计基础]ElementUI中Layout布局属性&Form表单属性详解
前端·低代码·elementui
竹鹿众猿2 天前
ElementUI表单验证指南
前端·vue.js·elementui
i_am_a_div_日积月累_3 天前
解决el-input输入框输入数组传参报错
javascript·vue.js·elementui
十碗饭吃不饱3 天前
Vue+element-ui,实现表格渲染缩略图,鼠标悬浮缩略图放大,点击缩略图播放视频(一)
elementui·vue
穗门永存3 天前
vue+elementUi+axios实现分页(MyBatis、Servlet)
vue.js·servlet·elementui·mybatis
宝拉不想努力了4 天前
vue2使用element中多选组件el-checkbox-group,数据与UI更新不同步
javascript·vue.js·elementui
沃野_juededa5 天前
el-dialog 组件 多层嵌套 被遮罩问题
javascript·vue.js·elementui