v1.0.0-beta 源码正式开源

2026-06-12 13:19:31 +08:00 · 2022-12-06 15:08:29 +08:00
commit 636ae7b169
461 changed files with 116817 additions and 0 deletions
@@ -0,0 +1,147 @@
+<!-- 徽章 -->
+<template>
+	<view class="tm--badges  fulled">
+		<view @click.stop="onclick" v-if="icon" class="tm--badges--cm icons flex-center border-white-a-1" :class="[color]" :style="offses+`;width:${iconWidth}rpx;height:${iconWidth}rpx;`">
+			<view class="d-inline-block flex-center vertical-align-middle" style="transform: scale(0.7); line-height: 0;">
+				<tm-icons style="line-height: 0;" :size="iconSize" :color="iconColor" dense :name="icon"></tm-icons>
+			</view>
+		</view>
+		<view
+			@click="onclick"
+			v-if="!icon"
+			:style="offses"
+			class="tm--badges--cm d-inline-block px-6 "
+			:class="[color_tmeme, label != '' && !dot ? 'num shadow-red-10' : 'dot', 'flex-center']"
+		>
+			<text v-if="!dot" class="text-size-xs">{{ label }}</text>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+/**
+ * 徽章、角标
+ * @property {String} label = [] 默认：''，当填入信息时即显示数字角标。
+ * @property {Number} icon-size = [] 默认：24，当为图标时，可以设置图标大小。
+ * @property {Number} icon-width = [] 默认：32，当为图标时，可以设置宽高。
+ * @property {String} color = [] 默认：red，主题背景色
+ * @property {String} icon-color = [] 默认：white，图标主题背景色
+ * @property {Boolean|String} dot = [] 默认：true，使用点。优先级高于label数字展示。
+ * @property {String} icon = [] 默认：''，使用图标作为显示角标。
+ * @property {Array} offset = [] 默认：[0,0]，位置,x,y偏移量。
+ * @property {Funciton} click 点击角标时触发。
+ * @example <tm-badges  />
+ */
+import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
+export default {
+	components: { tmIcons },
+	name: 'tm-badges',
+	props: {
+		label: {
+			type: String | Number,
+			default: 0
+		},
+		// 使用点。优先级高于label数字展示。
+		dot: {
+			type: Boolean | String,
+			default: true
+		},
+		// 使用图标展示
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconSize: {
+			type: Number|String,
+			default: 24
+		},
+		iconWidth:{
+			type: Number|String,
+			default: 32
+		},
+		// 主题色名称
+		color: {
+			type: String,
+			default: 'red'
+		},
+		// 图标主题色名称
+		iconColor: {
+			type: String,
+			default: 'white'
+		},
+		// 位置[0,0]
+		offset: {
+			type: Array,
+			default: () => {
+				return [0, 0];
+			}
+		},
+		// 跟随主题色的改变而改变。
+		fllowTheme: {
+			type: Boolean | String,
+			default: false
+		}
+	},
+	computed: {
+		offses: function() {
+			let p = uni.$tm.objToString({
+				transform: `translateX(${this.offset[0]}px) translateY(${this.offset[1]}px)`
+			});
+			return p;
+		},
+		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;
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		onclick(e) {
+			this.$emit('click', e);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.tm--badges {
+	position: relative;
+	// pointer-events: none;
+	display: block;
+	.tm--badges--cm {
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 100%;
+		&.num {
+			width: auto;
+			min-width: 26rpx;
+			height: 35rpx;
+			color: #fff;
+			border-radius: 50rpx;
+			font-size: 22upx;
+			line-height: 35upx;
+			text-align: center;
+			
+		}
+
+		&.icons {
+			@extend .num;
+		}
+
+		&.dot {
+			width: 16upx;
+			height: 16upx;
+			min-width: 0 !important;
+			color: #fff;
+			padding: 0;
+			border-radius: 50%;
+		}
+	}
+}
+</style>