fix(Iconify): 修复在父组件使用 Iconify 组件时,tailwindcss 的 class无效的问题

This commit is contained in:
h_mo 2024-08-28 23:10:33 +08:00
parent b3a0ea73af
commit b9f433a9e5
2 changed files with 14 additions and 6 deletions

View File

@ -14,21 +14,29 @@ interface Props {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
size: 'inherit', size: 'inherit',
color: 'inherit',
}); });
const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`)); const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));
const iconStyle = computed(() => {
const styles: Record<string, string> = {};
if (props.color) {
styles.color = props.color;
}
if (props.size) {
styles.fontSize = iconSize.value;
}
return styles;
});
</script> </script>
<template> <template>
<text class="iconify-icon" :class="[props.icon]" /> <text class="iconify" :class="[props.icon]" :style="iconStyle" />
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.iconify-icon { .iconify {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
font-size: v-bind('iconSize');
color: v-bind('color');
} }
</style> </style>

View File

@ -13,7 +13,7 @@ const demo = ref('Demo');
<view class="mt-30px center flex flex-row gap-10px"> <view class="mt-30px center flex flex-row gap-10px">
<Iconify icon="i-mdi-account-box" size="64" color="blue" /> <Iconify icon="i-mdi-account-box" size="64" color="blue" />
<Iconify icon="i-mdi-account-box" size="48" color="orange" /> <Iconify icon="i-mdi-account-box" size="48" color="orange" />
<Iconify icon="i-mdi-account-box" size="32" color="green" /> <Iconify icon="i-mdi-account-box text-green-400" size="32" />
<Iconify icon="i-mdi-account-box" /> <Iconify icon="i-mdi-account-box" />
<Iconify icon="i-svg-spinners-12-dots-scale-rotate" /> <Iconify icon="i-svg-spinners-12-dots-scale-rotate" />
</view> </view>