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>(), {
|
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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user