526互联

Vue3中props+v-bind+计算属性+CSS样式混合使用案例

发布时间 2023-05-28 00:37:35作者: Felix_Openmind
<template>
  <DownOutlined class='collapse-icon'/>
</template>

<script setup lang='ts'>
import {ref, reactive} from "vue"
import {computed} from 'vue'

const props = defineProps({
  expand: {type: Boolean},
})
// 展开/收起 图标旋转转数
const turn = computed(() => `${props.expand} ? 0 : 0.5}turn`);
</script>

<style lang="less" scoped>
.collapse-icon {
  transform: rotate(v-bind(turn));
  transition: transform .3s;
}
</style>