70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
<template>
|
||
<view class="icon-wrapper" :style="iconStyle">
|
||
<text class="icon-text">{{ iconChar }}</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 简单图标映射
|
||
const icons = {
|
||
home: '🏠',
|
||
user: '👤',
|
||
chart: '📊',
|
||
product: '📦',
|
||
add: '➕',
|
||
search: '🔍',
|
||
order: '📋',
|
||
edit: '✏️',
|
||
check: '✓',
|
||
close: '✕',
|
||
stock: '🏭',
|
||
alert: '⚡',
|
||
in: '⬇️',
|
||
out: '⬆️',
|
||
customer: '👥',
|
||
money: '💰',
|
||
logout: '↩️',
|
||
right: '›',
|
||
left: '‹',
|
||
down: '▼',
|
||
lock: '🔐',
|
||
calendar: '📅',
|
||
setting: '⚙️',
|
||
wechat: '💬',
|
||
cash: '💵',
|
||
alipay: '💙',
|
||
plus: '📥',
|
||
flow: '📊'
|
||
}
|
||
|
||
export default {
|
||
name: 'Icon',
|
||
props: {
|
||
name: { type: String, required: true },
|
||
size: { type: [Number, String], default: 32 },
|
||
color: { type: String, default: '' }
|
||
},
|
||
computed: {
|
||
iconStyle() {
|
||
const style = {}
|
||
if (this.size) style.fontSize = typeof this.size === 'number' ? `${this.size}rpx` : this.size
|
||
if (this.color) style.color = this.color
|
||
return style
|
||
},
|
||
iconChar() {
|
||
return icons[this.name] || '•'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.icon-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.icon-text {
|
||
line-height: 1;
|
||
}
|
||
</style> |