<script setup lang="ts"> const props = defineProps({
px: {
type: String,
required: false,
},
bg: {
type: String,
default: 'transparent',
},
rounded: {
type: String,
default: 'none',
} })
const classes = [] for (const [key, value] of Object.entries(props)) {
(value !== undefined) && classes.push(`${key}-${value}`) }
</script>
<template>
<div :class="classes" class="overflow-hidden">
<slot></slot>
</div> </template> 소품은 반응성이 있기 때문에 DOM은 스크립트 처리 전에 렌더링을 완료할 수 있을 것으로 생각합니다.컴포넌트가 스크립트의 처리를 대기하도록 하려면 어떻게 해야 합니까?감사해요.
클래스가 추가되었지만 반응적이어서 영향을 미치지 않습니다…
질문에 대한 답변
클래스 이름을 동적으로 구성하지 않음
문자열 보간을 사용하거나 부분 클래스 이름을 함께 연결하면 테일윈드는 클래스 이름을 찾을 수 없으므로 대응하는 CSS를 생성하지 않습니다.
tailwindcss에서 동적 클래스 이름을 사용하는 방법 -> tailwindcss에서 동적 클래스 이름을 사용하는 방법
// wrong ❌ <div class="text-{{ error ? 'red' : 'green' }}-600"></div>
// correct ✔️ <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div> <script setup lang="ts"> import { computed } from 'vue';
const props = defineProps({
pxClass: {
type: String,
required: false,
default: 'px-4'
},
bgClass: {
type: String,
default: 'bg-transparent',
},
roundedClass: {
type: String,
default: 'rouned-none',
} });
const classes = computed(() => {
let result = [];
for (const [key, value] of Object.entries(props)) {
result.push(value)
}
return result; })
</script>
<template>
<div :class="classes" class="overflow-hidden">
<slot></slot>
</div> </template>