You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
127 KiB
Vue
82 lines
127 KiB
Vue
2 years ago
|
<template>
|
||
|
|
<text class="tui-icon"
|
||
|
|
:style="{ color: color || '#999', fontSize: size + unit, fontWeight: bold ? 'bold' : 'normal',margin:margin }"
|
||
|
|
@tap="handleClick">{{ icons[name] }}</text>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import icons from './tui-icon.js';
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
var domModule = weex.requireModule('dom');
|
||
|
|
domModule.addRule('fontFace', {
|
||
|
|
'fontFamily': 'thoruiFont',
|
||
|
|
'src': "url('data:font/truetype;charset=utf-8;base64,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
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
export default {
|
||
|
|
name: 'tuiIcon',
|
||
|
|
emits: ['click'],
|
||
|
|
props: {
|
||
|
|
name: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 32
|
||
|
|
},
|
||
|
|
//px或者rpx
|
||
|
|
unit: {
|
||
|
|
type: String,
|
||
|
|
default: 'px'
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: '#999'
|
||
|
|
},
|
||
|
|
bold: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
margin: {
|
||
|
|
type: String,
|
||
|
|
default: "0"
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
icons: icons
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick() {
|
||
|
|
this.$emit('click', {
|
||
|
|
index: this.index
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
/* 头条小程序组件内不能引入字体，需要在父级页面引入字体文件*/
|
||
|
|
@font-face {
|
||
|
|
font-family: thoruiFont;
|
||
|
|
src: url(data:font/ttf;base64,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
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #endif */
|
||
|
|
|
||
|
|
.tui-icon {
|
||
|
|
font-family: thoruiFont;
|
||
|
|
text-align: center;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
</style>
|