82 lines
64 KiB
Vue
82 lines
64 KiB
Vue
|
<template>
|
||
|
|
<text class="tui-icon" :class="[customPrefix,customPrefix?name:'']"
|
||
|
|
:style="{ color: getColor, fontSize: getSize, 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: ''
|
||
|
|
},
|
||
|
|
customPrefix: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
//px或者rpx
|
||
|
|
unit: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
bold: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
margin: {
|
||
|
|
type: String,
|
||
|
|
default: "0"
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
getColor() {
|
||
|
|
return this.color || (uni && uni.$tui && uni.$tui.tuiIcon.color) || '#999';
|
||
|
|
},
|
||
|
|
getSize() {
|
||
|
|
const size = this.size || (uni && uni.$tui && uni.$tui.tuiIcon.size) || 32;
|
||
|
|
const unit = this.unit || (uni && uni.$tui && uni.$tui.tuiIcon.unit) || 'px';
|
||
|
|
return size + unit
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
icons: icons
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick() {
|
||
|
|
this.$emit('click', {
|
||
|
|
index: this.index
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|