Vue3 + Element-Plus 抽屉关闭按钮居中

应用效果:

样式设置:

html 复制代码
// 抽屉标题
:deep(.el-drawer__title) {
  // 抽屉标题居中,但是如果在这里设置,就无法实现下面的抽屉关闭按钮居中,所以可以移到抽屉头部去设置抽屉标题居中
  // display: flex;
  // text-align: center;
  // justify-content: center;

  // 防止标题元素伸缩,抽屉关闭按钮居中
  flex: none;
}
相关推荐
其美杰布-富贵-李5 分钟前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
OpenTiny社区7 分钟前
GenUI SDK v1.3.0 发布|多框架兼容,一键换物料,渲染器 & 演练场全面增强!
前端·ai编程
用户938515635078 分钟前
useRef + Web Worker 实战:React 如何优雅地拥抱多线程
前端·javascript·react.js
嘟嘟071724 分钟前
useRef + Web Worker:React 中的耗时计算不卡页面
javascript·vue.js
mONESY25 分钟前
React Router v7 完全实战指南:从入门到鉴权,一套代码全搞定
javascript
万敏31 分钟前
Vue3 全栈实战第五周:Vitest 单元测试从零搭建实战记录
vue.js·node.js·全栈
他们叫我秃子31 分钟前
前端开发转 Go 全栈(五):终于遇到熟人了,Go 的闭包和高阶函数原来这么像 JavaScript
前端·后端·go
用户615958680002233 分钟前
从 0 写一个迷你 wujie:用原生 Web API 实现微前端
前端
妙码生花33 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(五十七):AI时代对组件封装的新理解、agInput 统一入口,动态表单预备
前端·后端·go
fairyly35 分钟前
接手新项目不用硬啃源码,我的 TRAE Work 快速上手实战工作流
前端·ai编程·trae