当前位置: 首页 > article >正文

给el-dialog的整体加动态class

需求,按某个按钮让整个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>


http://www.kler.cn/news/361985.html

相关文章:

  • Miniconda3 Linux安装教程
  • 基于PERL语言的MS中CASTEP模块批量提交计算脚本
  • laravel 查询数据库
  • 【每日刷题】Day142
  • 认识一下:__asm { int 80h; LINUX - sys_fork }
  • 某ai gpt的bug
  • Hadoop 3.4.0 安装与WordCount示例
  • 重学SpringBoot3-Reactive-Streams规范
  • 基于ADC方法的系统效能评估代码实现
  • Linux_VI、VIM编辑器
  • 如何优雅解决Go版本安装问题及与Oracle 11g的兼容性挑战20241017
  • React是如何工作的?
  • [实时计算flink]DataStream连接器设置方法
  • Linux中的socket文件和网络变成中的socket异同点
  • Python爬取京东商品信息,详细讲解,手把手教学(附源码)
  • LUCEDA IPKISS Tutorial 78:自定义Taper
  • 力扣 143.重排链表【详细手写】
  • 华三服务器R4900 G5在图形界面使用PMC阵列卡(P460-B4)创建RAID,并安装系统(中文教程)
  • 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-16
  • 英伟达开源超强模型Nemotron-70B;OpenAI推出Windows版ChatGPT桌面客户端
  • wps安装教程
  • 在Jmeter中的JSR223 PreProcessor使用javascript实战
  • ubuntu20 工作区独立
  • springboot063知识管理系统(论文+源码)_kaic
  • 鸿蒙_入门
  • 【雷电模拟器命令合集操作大全】官方文档整理贴