uni-halo/tm-vuetify/components/tm-icons/tm-icons.vue

<template>
	<!-- 图标 -->
	<view @click="onclick" v-if="name" class="tm-icons " >
		<view
			class="tm-icons-item "
			:style="{
				width: sizes,
				height: sizes,
				lineHeight: sizes
			}"
		>
			<block v-if="vtype == false">
				<image
					:src="name"
					:style="{
						width: sizes,
						height: sizes
					}"
					mode="scaleToFill"
				></image>
			</block>
			<block v-if="vtype == true">
				<!-- #ifdef APP-NVUE -->
				<text
					:style="{
						fontSize: sizes,
						fontFamily: 'iconfontTM'
					}"
					class="icons "
					:class="[black_tmeme ? colors + '-bk' : colors, dense ? '' : 'pa-10', black ? 'opacity-6' : '']"
				>
					{{ iconName }}
				</text>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<text
					:style="{
						fontSize: sizes,
						
					}"
					class="icons "
					:class="[prefx_computed, black_tmeme ? 'bk' : '', iconName, colorTheme ? colors : '', dense ? '' : 'pa-10', black ? 'opacity-6' : '']"
				></text>
				<!-- #endif -->
			</block>
		</view>
	</view>
</template>

<script>
/**
 * 图标组件
 * @property {Boolean} dense = [true|false] 默认false,是否去除边距
 * @property {String} prefx = [iconfont] 默认iconfont,默认图标的前缀，对自定义图标时有好处。
 * @property {String} name = [] 默认'',图标名称，注意不带前缀。
 * @property {String | Number} size = [] 默认28, 图标大小，单位是upx
 * @property {String} color = [primary] 默认primary, 图标主题颜色名
 * @property {Function} click 图标点击事件。
 * @example <tm-icons name='icon-clear'></tm-icons>
 */
export default {
	props: {
		dense: {
			//是否小边距
			type: Boolean,
			default: false
		},
		black: {
			type: Boolean,
			default: null
		},
		prefx: {
			type: String, //前缀
			default: 'iconfont'
		},
		name: {
			type: String, //图标名称。
			default: ''
		},
		size: {
			type: String | Number, //图标名称。
			default: 28
		},
		color: {
			type: String|null, //颜色名称或者颜色值。
			default: 'primary'
		},
		//强制转换图标类型，不通过内置判定，解决自己引用图片svg图标时当作字体图标的错误。
		iconType: {
			type: String,
			default: '' //img|icon
		},
		// 跟随主题色的改变而改变。
		fllowTheme: {
			type: Boolean | String,
			default: false
		}
	},
	computed: {
		iconName: function() {
			// #ifdef APP-NVUE || APP-PLUS-NVUE
			let fontList = require('@/tm-vuetify/scss/iconfonts/iconfont.json');
			let name = this.name.replace('icon-', '');

			// fontList.glyphs
			let itemIcon = fontList.glyphs.find((item, index) => {
				return item.font_class == name;
			});
			return eval('"\\u' + itemIcon.unicode + '"');
			// #endif
			return this.name;
		},
		prefx_computed() {
			let prefix = this.name.split('-')[0];
			if (prefix == 'icon') return 'iconfont';
			if (prefix == 'mdi') return 'mdi';

			return prefix;
		},
		black_tmeme: function() {
			return this.$tm.vx.state().tmVuetify.black;
		},
		vtype: function() {
			if (this.name[0] == '.' || this.name[0] == '/' || this.name.substring(0, 4) == 'http' || this.name.substring(0, 5) == 'https' || this.name.substring(0, 3) == 'ftp') {
				return false;
			}
			return true;
		},
		sizes: function() {
			if (typeof this.size === 'string') {
				if (/[rpx|upx|rem|em|vx|vh|px]$/.test(this.size)) {
					return this.size;
				}
				return uni.upx2px(parseInt(this.size)) + 'px';
			}
			if (typeof this.size === 'number' && !isNaN(this.size)) {
				return uni.upx2px(this.size) + 'px';
			}
		},
		color_tmeme: function() {
			if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
				return this.$tm.vx.state().tmVuetify.color;
			}
			return this.color;
		},
		colors: {
			get: function() {
				if (!this.color_tmeme) return 'text-primary';
				if (!this.$TestColor(this.color_tmeme)) {
					return this.color_tmeme;
				}
				return 'text-' + this.color_tmeme;
			},
			set: function() {
				if (!this.$TestColor(this.color_tmeme)) {
					this.colorTheme = false;
					return this.color_tmeme;
				}
				this.colorTheme = true;
			}
		}
	},
	data() {
		return {
			colorTheme: true
		};
	},
	methods: {
		onclick(e) {
			this.$emit('click', e);
		}
	}
};
</script>

<style lang="scss" scoped>
.tm-icons {
	display: inline-block;
	.tm-icons-item{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.icons {
		&.black {
			color: #fff;
		}
	}
}
</style>