修改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>
相关推荐
海天胜景4 小时前
vue3 el-table 右击
javascript·vue.js·elementui
Sahas10197 小时前
vite+vue2+elementui构建之 package.json
elementui·vue·vite
山海上的风17 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
凉豆菌1 天前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司1 天前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
可爱的秋秋啊2 天前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
宝拉不想努力了2 天前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
Dnn012 天前
修改el-select背景颜色
css·elementui·vue3
Aotman_3 天前
VUE Element-ui Message 消息提示组件自定义封装
前端·javascript·vue.js·ui·elementui·es6