给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>
相关推荐
计算机毕设VX:Fegn08955 分钟前
计算机毕业设计|基于springboot + vue在线音乐播放系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
计算机毕设VX:Fegn08959 分钟前
计算机毕业设计|基于springboot + vue博物馆展览与服务一体化系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
沐浴露z11 分钟前
学习通“只能录入不能粘贴” 解决方案与原理分析
javascript
多看书少吃饭15 分钟前
Vite开发环境按需编译是怎么实现的
前端
ybb_ymm24 分钟前
@Async修饰不生效
java·前端·数据库
Sapphire~27 分钟前
Vue3-03 熟悉src文件夹及Vue文件格式
前端·javascript·vue.js
快乐星球37232 分钟前
鸿蒙5、6用户h5页面使用schemeURL跳转小程序失败
前端
用户8417948145640 分钟前
vxe-table 复制单元格内容总会在最后加个换行符,如何去掉末尾换行符的解决方法
vue.js
ChangYan.1 小时前
Electron使用ffi-napi报错External buffers are not allowed解决办法
前端·javascript·electron
Sept9401 小时前
详解实现属性的全面拦截
前端