108 lines
3.2 KiB
Vue
108 lines
3.2 KiB
Vue
<template>
|
|
<!-- #ifdef APP-NVUE -->
|
|
<text :style="[{ color: propColor, 'font-size': iconSize, 'font-family': 'iconfont' }]" class="icon-font" :class="'cr-' + propType" @tap="_onClick">{{ iconfontCode }}</text>
|
|
<!-- #endif -->
|
|
<!-- #ifndef APP-NVUE -->
|
|
<text :style="{ color: propColor, 'font-size': iconSize }" class="icon-font" :class="'icon-' + propName + ' cr-' + propType" @tap="_onClick"></text>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script>
|
|
//#ifdef APP-NVUE
|
|
import dataIconfont from '@/static/icon/iconfont.json';
|
|
import iconUrl from '@/static/icon/iconfont.ttf';
|
|
//#endif
|
|
/**
|
|
* Icons 图标
|
|
* @description 用于展示 icons 图标
|
|
* @property {Number} propSize 图标大小
|
|
* @property {String} propName 图标图案，参考示例
|
|
* @property {String} propColor 图标颜色
|
|
* @property {String} propType 图标常规颜色 info / primary / error/ warning / success
|
|
*/
|
|
export default {
|
|
name: 'u-icon',
|
|
props: {
|
|
propName: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
propType: {
|
|
type: String,
|
|
default: 'info',
|
|
},
|
|
propSize: {
|
|
type: [Number, String],
|
|
default: 32,
|
|
},
|
|
propColor: {
|
|
type: String,
|
|
default: '',
|
|
}
|
|
},
|
|
computed: {
|
|
//#region 获取图标大小
|
|
iconSize() {
|
|
return this.getVal(this.propSize);
|
|
},
|
|
//#ifdef APP-NVUE
|
|
// appnvue页面做的特殊处理
|
|
iconfontCode() {
|
|
const code = this.dataIconfont.glyphs.find(v => v.font_class === this.propName);
|
|
if (code != null) {
|
|
return unescape(`%u${code.unicode}`);
|
|
}
|
|
return ''
|
|
}
|
|
//#endif
|
|
//#endregion
|
|
},
|
|
//#ifdef APP-NVUE
|
|
data() {
|
|
return {
|
|
dataIconfont: dataIconfont,
|
|
iconUrl: iconUrl
|
|
}
|
|
},
|
|
mounted() {
|
|
const domModule = weex.requireModule("dom");
|
|
domModule.addRule('fontFace', {
|
|
'fontFamily': 'iconfont',
|
|
'src': `url('${this.iconUrl}')`
|
|
})
|
|
},
|
|
//#endif
|
|
methods: {
|
|
//#region 获取图标大小
|
|
getVal(val) {
|
|
const reg = /^[0-9]*$/g;
|
|
return typeof val === 'number' || reg.test(val) ? val.toString() + 'rpx' : val;
|
|
},
|
|
//#endregion
|
|
//#region 点击事件处理
|
|
_onClick() {
|
|
this.$emit('click');
|
|
}
|
|
//#endregion
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* #ifndef APP-NVUE */
|
|
@import url('@/static/icon/iconfont.css');
|
|
/* #ifndef MP-WEIXIN */
|
|
@font-face {
|
|
font-family: "iconfont";
|
|
src: url('@/static/icon/iconfont.ttf');
|
|
}
|
|
/* #endif */
|
|
/* #endif */
|
|
.icon-font {
|
|
/* #ifndef APP-NVUE */
|
|
font-family: 'iconfont' !important;
|
|
/* #endif */
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
</style> |