给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>
相关推荐
Python大数据分析@5 分钟前
通俗的讲,网络爬虫到底是什么?
前端·爬虫·网络爬虫
不爱学英文的码字机器22 分钟前
[操作系统] 环境变量详解
开发语言·javascript·ecmascript
Lysun00126 分钟前
vue2的$el.querySelector在vue3中怎么写
前端·javascript·vue.js
毛毛三由26 分钟前
【组件分享】商品列表组件-最佳实践
vue.js
jerry-891 小时前
Centos类型服务器等保测评整/etc/pam.d/system-auth
java·前端·github
工业甲酰苯胺1 小时前
深入解析 Spring AI 系列:解析返回参数处理
javascript·windows·spring
小爬菜1 小时前
Django学习笔记(启动项目)-03
前端·笔记·python·学习·django
想要打 Acm 的小周同学呀1 小时前
前端Vue2项目使用md编辑器
前端·编辑器·vue2·markdown 语法
计算机-秋大田1 小时前
基于SSM的家庭记账本小程序设计与实现(LW+源码+讲解)
java·前端·后端·微信小程序·小程序·课程设计
海的预约2 小时前
VUE之路由Props、replace、编程式路由导航、重定向
前端·vue.js·智能路由器