blackteay/uniapp-vue3-vite-ts-template
1
0
Fork 0
mirror of https://gitee.com/h_mo/uniapp-vue3-vite-ts-template synced 2025-04-05 19:41:44 +08:00
Code Issues Projects Releases Wiki Activity

Pre Merge pull request !20 from dodu/dev

Browse Source
This commit is contained in:
dodu 2024-06-26 10:26:04 +00:00 committed by Gitee
commit 60d46c0c86
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
3 changed files with 51 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -65,7 +65,7 @@
"@dcloudio/uni-stacktracey": "3.0.0-alpha-4020220240624001",
"@dcloudio/uni-vue-devtools": "3.0.0-alpha-4020220240624001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-4020220240624001",
"@iconify/vue": "^4.1.2",
"@iconify/json": "^2.2.206",
"@types/crypto-js": "^4.2.2",
"@types/lodash-es": "^4.17.12",
"@types/node": "^20.14.8",

39
src/components/Iconify/index.vue Normal file
View File

@ -0,0 +1,39 @@
<script lang="ts" setup name="Iconify">
interface Props {
icon: string
size?: string | number
color?: string
}
/**
* @name Iconify
* @desc 图标
* @docs https://iconify.design/docs/icon-components/vue/
* @example <Iconify icon="ant-design:home-outlined" />
*/
const props = withDefaults(defineProps<Props>(), {
size: 'inherit',
color: 'inherit',
});
const emits = defineEmits(['click']);
function click() {
emits('click');
}
function isNumber(str: string | number): boolean {
return !Number.isNaN(Number(str));
}
</script>
<template>
<view class="iconify-icon" :class="[props.icon]" @click="click" />
</template>
<style lang="scss" scoped>
.iconify-icon {
display: inline-block;
line-height: 1;
font-size: v-bind('isNumber(props.size) ? `${props.size}px` : props.size');
color: v-bind('props.color');
}
</style>

12
src/pages/demo/index.vue
View File

@ -1,10 +1,20 @@
<script lang="ts" setup>
import Iconify from '@/components/Iconify/index.vue';
const demo = ref('Demo');
</script>
<template>
<view class="pt-36 text-lg font-medium flex justify-center items-center">
<view class="pt-36 text-lg font-medium flex flex-col justify-center items-center">
{{ demo }}
<view class="mt-30px">
iconify 组件
</view>
<view class="mt-30px center flex flex-row gap-10px">
<Iconify icon="i-ri-alipay-fill" size="32" color="blue" />
<Iconify icon="i-ri-settings-5-line" size="48" color="orange" />
<Iconify icon="i-ri-wechat-fill" size="32" color="green" />
</view>
</view>
</template>