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