You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
47 KiB
94 lines
47 KiB
1 year ago
|
<template>
|
||
|
|
<text :style="{ color: color, fontSize: size + unit, fontWeight: fontWeight}" class="fui-icon"
|
||
|
|
:class="{'fui-icon__color':!color}" @click="handleClick">{{ icons[name] }}</text>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import icons from './fui-icon.js';
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
var domModule = weex.requireModule('dom');
|
||
|
|
domModule.addRule('fontFace', {
|
||
|
|
'fontFamily': 'fuiFont',
|
||
|
|
'src': "url('data:font/truetype;charset=utf-8;base64,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
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
export default {
|
||
|
|
name: "fui-icon",
|
||
|
|
emits: ['click'],
|
||
|
|
props: {
|
||
|
|
name: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 64
|
||
|
|
},
|
||
|
|
//rpx | px
|
||
|
|
unit: {
|
||
|
|
type: String,
|
||
|
|
default: 'rpx'
|
||
|
|
},
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: '#333333'
|
||
|
|
},
|
||
|
|
// #endif
|
||
|
|
// #ifndef APP-NVUE
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
// #endif
|
||
|
|
//字重
|
||
|
|
fontWeight: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 'normal'
|
||
|
|
},
|
||
|
|
params: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
icons: icons
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick() {
|
||
|
|
this.$emit('click', {
|
||
|
|
params: this.params
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
/* 头条小程序组件内不能引入字体，需要在父级页面引入字体文件*/
|
||
|
|
@font-face {
|
||
|
|
font-family: fuiFont;
|
||
|
|
src: url("./fui-icon.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #endif */
|
||
|
|
.fui-icon {
|
||
|
|
font-family: fuiFont;
|
||
|
|
text-decoration: none;
|
||
|
|
text-align: center;
|
||
|
|
/* #ifdef H5 */
|
||
|
|
cursor: pointer;
|
||
|
|
/* #endif */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
.fui-icon__color {
|
||
|
|
color: var(--fui-color-section, #333333) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #endif */
|
||
|
|
</style>
|