给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>
相关推荐
xixixin_35 分钟前
【React】为什么移除事件要写在useEffect的return里面?
前端·javascript·react.js
嘗_37 分钟前
react 源码2
前端·javascript·react.js
我只会写Bug啊5 小时前
Vue文件预览终极方案:PNG/EXCEL/PDF/DOCX/OFD等10+格式一键渲染,开源即用!
前端·vue.js·pdf·excel·预览
扯蛋4386 小时前
LangChain的学习之路( 一 )
前端·langchain·mcp
Mr.Jessy6 小时前
Web APIs学习第一天:获取 DOM 对象
开发语言·前端·javascript·学习·html
午安~婉6 小时前
javaScript八股问题
开发语言·javascript·原型模式
西西学代码7 小时前
Flutter---个人信息(5)---持久化存储
java·javascript·flutter
芝麻开门-新起点7 小时前
flutter 生命周期管理:从 Widget 到 State 的完整解析
开发语言·javascript·ecmascript
ConardLi7 小时前
Easy Dataset 已经突破 11.5K Star,这次又带来多项功能更新!
前端·javascript·后端
冴羽7 小时前
10 个被严重低估的 JS 特性,直接少写 500 行代码
前端·javascript·性能优化