修改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>
相关推荐
千码君20163 天前
kotlin:jetpack compose 生成动态可控的动画
vue.js·elementui·kotlin
牧杉-惊蛰3 天前
修改表格选中时的背景色与鼠标滑过时的背景色
前端·javascript·css·vue.js·elementui·html
没有故事、有酒4 天前
Vue2中el-table修改表头高度和行高
javascript·vue.js·elementui
蒙面价肥猫4 天前
el-popconfirm 弹窗不显示问题总结
vue.js·elementui
蜡台6 天前
IDEA LiveTemplates Vue ElementUI
前端·vue.js·elementui·idea·livetemplates
邂逅星河浪漫8 天前
【Vue2-ElementUI】:model、v-model、prop
javascript·vue.js·elementui
cypking11 天前
二次封装ElementUI日期范围组件:打造带限制规则的Vue2 v-model响应式通用组件
前端·javascript·elementui
wangjinsheng59312 天前
Vue3 + Element Plus 前端 AI 编码模板
前端·vue.js·ai·elementui·ai编程
easyboot12 天前
使用element-plus的暗黑模式
javascript·vue.js·elementui
1314lay_100712 天前
Element Plus左侧侧边栏按照屏幕宽度来确定显示和隐藏,如果太小的话,侧边栏消失,菜单会变成一个小按钮,点击按钮以模态框弹出
javascript·vue.js·elementui