自学内容网 自学内容网
自学内容网 > 正文

给el-dialog的整体加动态class

🕗 发布于 2024-10-17 06:03 vue.js  javascript  前端  

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

<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>


原文地址：https://blog.csdn.net/zmy967131/article/details/142974147

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

  • Java后端面试题：JVM篇

    （1）JVM指的是Java虚拟机，本质上是一个运行在计算机上的程序，它的职责是运行Java字节码文件，作用是为了支持跨平台特性。（2）JVM的功能有三项：第一是解释执行字节码指令（解释运行）；第二是管

    阅读更多2024-10-17
  • Spring Boot、Spring MVC和Spring有什么区别

    用来接收请求，然后定义了一套路由策略(ur到handle的映射)及适配执行handle，将handle结果使用视图解析技术生成视图展现给前端。SpringMVC是web框架，是Spring的一部分，S

    阅读更多2024-10-17
  • 初次见面需要寻找合适的话题

    在丰富多彩的社会生活中，总有一些最深切的体会、最想说的话、最厌恶或最喜欢的人和事、最关心或最希望得到的东西吧?对此，往往能反映出一个人说话办事等方面的水平和方式，更能反映出一个人是否善于观察事物、分析

    阅读更多2024-10-17
  • project项目管理系统的作用

    它允许项目经理有效地监控项目状态，确保项目按时按预算完成，并提高整体的项目执行效率。在这些关键功能中，，因为它是确保项目成功的基础。MS Project 允许用户通过直观的界面创建详细的任务列表、里程

    阅读更多2024-10-17
  • B3612 【深进1.例1】求区间和

    给定 n 个正整数组成的数列 1,2,⋯ ,a1​,a2​,⋯,an​ 和 m 个区间 [li​,ri​]，分别求这 m 个区间的区间和。样例解释：第 1 到第 4 个数加起来和为 10。第 2 个数

    阅读更多2024-10-17
  • 基于yolov10的水果检测，支持图像、视频和摄像实时检测【pytorch框架、python】

    基于yolov10的水果检测系统是在pytorch框架下实现的，这是一个完整的项目，包括代码，数据集，训练好的模型权重，模型训练记录，ui界面和各种模型指标（准确率、精确率、召回率等）等。ui界面由p

    阅读更多2024-10-17
  • 每日OJ题_牛客_HJ63DNA序列_滑动窗口_C++_Java

    每日OJ题_牛客_HJ63DNA序列_滑动窗口_C++_Java（用滑动窗口的思想，首先用一个长度为n的窗口覆盖字符串前n部分子串，统计这里的CG数量，并暂时作为最大值。然后窗口右移，如果左边出去的是

    阅读更多2024-10-17
  • 路由器ip地址是什么意思？路由器ip地址哪里看

    在数字化时代，路由器作为连接互联网的重要设备，扮演着举足轻重的角色。然而，对于非技术背景的普通用户来说，路由器的一些专业术语和设置可能显得颇为神秘。其中，“路由器IP地址”就是一个常见但又容易让人困惑

    阅读更多2024-10-17
  • 第二章 jQuery基本操作

    除css()外，还有获取和设置元素高度、宽度等的样式操作方法。- 设置或返回所选元素的内容（包括 HTML 标签）使用css()为指定的元素设置样式值或获取样式值。可以获取或设置元素的value属性值

    阅读更多2024-10-17
  • CUDA 共享内存 shared memory

    _shared__此功能（与线程同步结合）有许多用途，例如用户管理的数据缓存、高性能协作并行算法（例如并行缩减），以及在原本不可能的情况下促进全局内存合并。

    阅读更多2024-10-17
自学内容网
Copyright © 2015-2024