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>
|
|||
|
|
|