2024-09-14 06:15:08 +00:00
|
|
|
|
<template>
|
2024-10-14 06:35:45 +00:00
|
|
|
|
<view class="iconfont-container" :class="propClass" :style="'display:'+propContainerDisplay+';'">
|
2025-05-16 03:16:44 +00:00
|
|
|
|
<text class="iconfont" :class="name" :style="'color:'+ color + ';font-size:'+ size + ';' + propStyle" @tap="$emit('click', $event)"></text>
|
2024-09-14 06:15:08 +00:00
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
|
|
props: {
|
|
|
|
|
|
name: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: '',
|
|
|
|
|
|
},
|
|
|
|
|
|
color: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: '',
|
|
|
|
|
|
},
|
|
|
|
|
|
size: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: '28rpx',
|
|
|
|
|
|
},
|
|
|
|
|
|
propClass: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: '',
|
|
|
|
|
|
},
|
2024-10-14 06:35:45 +00:00
|
|
|
|
propContainerDisplay: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: 'inline-block',
|
2025-05-16 03:16:44 +00:00
|
|
|
|
},
|
|
|
|
|
|
propStyle: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: '',
|
|
|
|
|
|
},
|
2024-09-14 06:15:08 +00:00
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
/* iconfont.css全局注册需要将src切换成绝对路径 */
|
|
|
|
|
|
/* @/static/icon/ */
|
|
|
|
|
|
@import url('@/static/icon/iconfont.css');
|
|
|
|
|
|
/* @import url('https://at.alicdn.com/t/c/font_4227145_kbr2f9jt68b.css'); */
|
|
|
|
|
|
.iconfont {
|
2024-09-25 03:51:00 +00:00
|
|
|
|
display: flex;
|
2024-09-14 06:15:08 +00:00
|
|
|
|
font-size: inherit;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
/* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
|
|
|
|
|
|
vertical-align: -0.15em;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
/* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
|
|
|
|
|
|
fill: currentcolor;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
