给el-dialog的整体加动态class

需求,按某个按钮让整个el-dialog旋转,再按按钮,转回来,因此需要在整个el-dialog上加一个动态样式

javascript 复制代码
<el-dialog
:class="dynamicClass"
> 
.......
</el-dialog>


<script lang="ts" setup>
import { computed, ref} from 'vue'

let isRotate = ref<boolean>(false) //是否旋转

//横竖屏切换的动态class,使用计算属性
const dynamicClass = computed(() => {
  return isRotate.value ? 'rotateClass' : ''
})

/**
 * 按钮回调
 */
function switchLandscapeScreen() {
  isRotate.value = !isRotate.value   //只需要控制该变量
} 

</script>

<style scoped lang="scss">

:deep(.rotateClass) {
  transform: rotate(-90deg);
}

</style>
相关推荐
哀木4 分钟前
理清 https 的加密逻辑
前端
拖拉斯旋风10 分钟前
深入理解 LangChain 中的 `.pipe()`:构建可组合 AI 应用的核心管道机制
javascript·langchain
肖老师xy10 分钟前
Ai生成时间排期进度
javascript·vue.js·elementui
借个火er11 分钟前
无界微前端源码解析:路由同步
前端
Aliex_git12 分钟前
Vue 错误处理机制源码理解
前端·javascript·vue.js
ejjdhdjdjdjdjjsl13 分钟前
Winform初步认识
开发语言·javascript·ecmascript
普通码农15 分钟前
PowerShell 神操作:输入「p」直接当「pnpm」用,敲命令速度翻倍!
前端·后端·程序员
2501_942818911 小时前
AI 多模态全栈项目实战:Vue3 + Node 打造 TTS+ASR 全家桶!
vue.js·人工智能·node.js
Komorebi゛1 小时前
【Vue3+Element Plus】el-dialog弹窗点击遮罩层无法关闭弹窗问题记录
前端·vue.js·elementui
vim怎么退出1 小时前
一次线上样式问题复盘:当你钻进 CSS 牛角尖时,问题可能根本不在 CSS
前端·css