封装组件-通过props动态控制css样式

<template>
  <div class="icon" :style="radiusStyle">
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  radius: {
    type: [Number, String],
    default: 0,
  },
});

const radiusStyle = computed(() => {
  if (props.radius) {
    return `border-radius: ${props.radius}px;`;
  }
  return undefined;
});
</script>