85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<template>
|
||
<!-- 主题图标：line / fill / duotone / block -->
|
||
<view class="theme-icon" :class="'theme-icon--' + mode" :style="wrapStyle">
|
||
<u-icon
|
||
v-if="name"
|
||
:name="name"
|
||
:color="glyphColor"
|
||
:size="size"
|
||
/>
|
||
<image
|
||
v-else-if="src"
|
||
:src="src"
|
||
class="theme-icon__img"
|
||
mode="aspectFit"
|
||
:style="{ width: size + 'px', height: size + 'px' }"
|
||
/>
|
||
<slot v-else />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getActiveLayout, getActiveVars } from '@/utils/theme'
|
||
|
||
export default {
|
||
name: 'ThemeIcon',
|
||
props: {
|
||
name: { type: String, default: '' },
|
||
src: { type: String, default: '' },
|
||
size: { type: [Number, String], default: 20 },
|
||
/** 覆盖 effect.icon */
|
||
icon: { type: String, default: '' },
|
||
},
|
||
computed: {
|
||
mode() {
|
||
if (this.icon) return this.icon
|
||
const effect = (getActiveLayout().effect) || {}
|
||
return effect.icon || 'line'
|
||
},
|
||
vars() {
|
||
return getActiveVars()
|
||
},
|
||
primary() {
|
||
return this.vars['--color-primary'] || '#B08D57'
|
||
},
|
||
surface() {
|
||
return this.vars['--color-surface'] || '#fff'
|
||
},
|
||
glyphColor() {
|
||
if (this.mode === 'block') return this.surface
|
||
if (this.mode === 'fill' || this.mode === 'duotone') return this.primary
|
||
return this.primary
|
||
},
|
||
wrapStyle() {
|
||
if (this.mode === 'block') {
|
||
return {
|
||
background: this.primary,
|
||
borderRadius: this.vars['--radius-sm'] || '8rpx',
|
||
padding: '10rpx',
|
||
}
|
||
}
|
||
if (this.mode === 'duotone') {
|
||
return {
|
||
background: this.vars['--color-primary-soft'] || 'rgba(0,0,0,0.06)',
|
||
borderRadius: '999rpx',
|
||
padding: '8rpx',
|
||
}
|
||
}
|
||
return {}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.theme-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.theme-icon__img {
|
||
display: block;
|
||
}
|
||
</style>
|