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>(), {
size: 'inherit',
color: 'inherit',
});
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>
<template>
<text class="iconify-icon" :class="[props.icon]" />
<text class="iconify" :class="[props.icon]" :style="iconStyle" />
</template>
<style lang="scss" scoped>
.iconify-icon {
.iconify {
display: inline-block;
line-height: 1;
font-size: v-bind('iconSize');
color: v-bind('color');
}
</style>

View File

@ -13,7 +13,7 @@ const demo = ref('Demo');
<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="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-svg-spinners-12-dots-scale-rotate" />
</view>