71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
||
<text class="iconfont" :class="iconClass" :style="iconStyle" @click="handleClick"></text>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
|
||
const props = defineProps({
|
||
// 图标名称，如：home、user、search
|
||
name: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
// 图标大小（单位：rpx）
|
||
size: {
|
||
type: [String, Number],
|
||
default: 32
|
||
},
|
||
// 图标颜色
|
||
color: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 是否粗体
|
||
bold: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['click'])
|
||
|
||
// 图标类名
|
||
const iconClass = computed(() => {
|
||
const prefix = props.name.startsWith('icon-') ? '' : 'icon-'
|
||
return `${prefix}${props.name}`
|
||
})
|
||
|
||
// 图标样式
|
||
const iconStyle = computed(() => {
|
||
const style = {
|
||
fontSize: `${props.size}rpx`
|
||
}
|
||
|
||
if (props.color) {
|
||
style.color = props.color
|
||
}
|
||
|
||
if (props.bold) {
|
||
style.fontWeight = 'bold'
|
||
}
|
||
|
||
return style
|
||
})
|
||
|
||
// 点击事件
|
||
const handleClick = (e) => {
|
||
emit('click', e)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.iconfont {
|
||
font-style: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
display: inline-block;
|
||
}
|
||
</style>
|
||
|