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

Merge pull request !23 from h_mo/dev
This commit is contained in:
h_mo 2024-08-28 15:12:38 +00:00 committed by Gitee
commit fcd9e83732
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
5 changed files with 40 additions and 29 deletions

View File

@ -40,6 +40,10 @@
- 访问[uniapp 插件](https://ext.dcloud.net.cn/plugin?id=8559)
- 如有问题请加群【[872378674](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=T3PX4_sWeMXeFGWF6EZJLXABSNyStYR0&authKey=EYXATTrGpmyowFxk9xtX6T7FIRbOF7brLd9uODxl%2B6jIbGfWQGW869V1hkPSlGYT&noverify=0&group_code=872378674)】交流
[//]: # (- 如有问题请加入【[im交流群](https://im.dcloud.net.cn/#/?joinGroup=665b1e707fbdb2002f12a7ee&#41)】)
### 说明
- 框架完全基于 Vue3 SFC `<script setup>` 写法,不支持 Vue2;

View File

@ -45,35 +45,35 @@
"dependencies": {
"@alova/adapter-uniapp": "^2.0.4",
"@alova/mock": "^2.0.4",
"@dcloudio/uni-app": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-app-plus": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-components": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-h5": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-i18n": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-app": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-app-plus": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-components": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-h5": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-i18n": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4020620240822002",
"@multiavatar/multiavatar": "^1.0.7",
"alova": "^3.0.9",
"alova": "^3.0.11",
"crypto-js": "^4.2.0",
"lodash-es": "^4.17.21",
"pinia": "^2.2.2",
"vue": "^3.4.38"
},
"devDependencies": {
"@antfu/eslint-config": "^2.26.0",
"@antfu/eslint-config": "^2.27.1",
"@dcloudio/types": "^3.4.12",
"@dcloudio/uni-automator": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-4020520240808001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-4020520240808001",
"@dcloudio/uni-automator": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-4020620240822002",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-4020620240822002",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-4020620240822002",
"@egoist/tailwindcss-icons": "^1.8.1",
"@iconify/json": "^2.2.238",
"@iconify/json": "^2.2.239",
"@types/crypto-js": "^4.2.2",
"@types/lodash-es": "^4.17.12",
"@types/node": "^20.16.1",
@ -96,7 +96,7 @@
"uni-mini-router": "^0.1.6",
"uni-read-pages-vite": "^0.0.6",
"unplugin-auto-import": "^0.18.2",
"vite": "^5.4.1",
"vite": "^5.4.2",
"vite-plugin-restart": "^0.4.1",
"weapp-tailwindcss": "^3.5.0"
},

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>

View File

@ -21,7 +21,6 @@ const ContentType = {
*/
const alovaInstance = createAlova({
baseURL: BASE_URL,
localCache: null, // 设置为null即可全局关闭全部请求缓存
...AdapterUniapp({
/* #ifndef APP-PLUS */
mockRequest: isUseMock() ? mockAdapter : undefined, // APP 平台无法使用mock
@ -62,7 +61,7 @@ const alovaInstance = createAlova({
throw new Error(`请求错误[${code}]${message}`);
}
// 处理http状态错误
handleHttpStatus(statusCode, message || '');
handleHttpStatus(statusCode, errMsg || '');
throw new Error(`HTTP请求错误[${statusCode}]${errMsg}`);
},