给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>
相关推荐
2501_946230984 小时前
Cordova&OpenHarmony通知中心实现
android·javascript
南山安4 小时前
JavaScript 函数柯里化:从入门到实战,一文搞定(面试可用)
javascript·面试·函数式编程
谢尔登4 小时前
Monorepo 架构
前端·arcgis·架构
啃火龙果的兔子4 小时前
JavaScript 中的 Symbol 特性详解
开发语言·javascript·ecmascript
栀秋6665 小时前
你会先找行还是直接拍平?两种二分策略你Pick哪个?
前端·javascript·算法
漂流瓶jz5 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·css
xhxxx5 小时前
传统工具调用太痛苦?LangChain 一键打通 LLM 与真实世界
前端·langchain·llm
南山安5 小时前
LangChain学习:Memory实战——让你的大模型记住你
前端·javascript·langchain
武昌库里写JAVA5 小时前
iview-CRUD模板
vue.js·spring boot·sql·layui·课程设计
BD_Marathon6 小时前
Promise基础语法
开发语言·前端·javascript