mirror of
https://gitee.com/h_mo/uniapp-vue3-vite-ts-template
synced 2025-04-05 06:12:44 +08:00
fix(Iconify): 修复在父组件使用 Iconify 组件时,tailwindcss 的 class无效的问题
This commit is contained in:
parent
b3a0ea73af
commit
b9f433a9e5
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user