im-ui-mobile 0.0.98 → 0.1.0

package/components/im-avatar/im-avatar.vue

@@ -1,122 +1,122 @@
-<template>
-	<view class="avatar  none-pointer-events" @click="showUserInfo" :title="name">
-		<image v-if="url" class="avatar-image" :src="url" :style="avatarImageStyle" lazy-load="true"
-			mode="aspectFill" />
-		<view v-else class="avatar-text" :style="avatarTextStyle">
-			{{ name?.substring(0, 1).toUpperCase() }}
-		</view>
-		<view v-if="online" class="online" title="用户当前在线" />
-	</view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-	id?: number;
-	size?: number | string;
-	url?: string;
-	name?: string;
-	radius?: string;
-	online?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	size: 'default',
-	name: '',
-	radius: "50%",
-	online: false
-});
-
-interface Emits {
-	(e: 'click', id: number): void
-}
-const emit = defineEmits<Emits>()
-
-const colors = [
-	"#5daa31", "#c7515a", "#e03697", "#85029b",
-	"#c9b455", "#326eb6"
-];
-
-const showUserInfo = () => {
-	if (props.id && props.id > 0) {
-		// TODO:组件化
-		// uni.navigateTo({ url: "/pages/common/user-info?id=" + props.id });
-		emit('click', props.id)
-	}
-};
-
-const _size = computed(() => {
-	if (typeof props.size === 'number') {
-		return props.size;
-	} else if (typeof props.size === 'string') {
-		const sizeMap: Record<string, number> = {
-			'default': 96,
-			'small': 84,
-			'smaller': 72,
-			'mini': 60,
-			'minier': 48,
-			'lage': 108,
-			'lager': 120,
-		};
-		return sizeMap[props.size] || 96;
-	}
-	return 96;
-});
-
-const avatarImageStyle = computed(() => {
-	return `width:${_size.value}rpx;height:${_size.value}rpx;`;
-});
-
-const avatarTextStyle = computed(() => {
-	return `width: ${_size.value}rpx;
-          height:${_size.value}rpx;
-          background: linear-gradient(145deg,#ffffff20 25%,#00000060),${textColor.value};
-          font-size:${_size.value * 0.45}rpx;
-          border-radius: ${props.radius};`;
-});
-
-const textColor = computed(() => {
-	if (!props.name) {
-		return '#fff';
-	}
-	let hash = 0;
-	for (let i = 0; i < props.name.length; i++) {
-		hash += props.name.charCodeAt(i);
-	}
-	return colors[hash % colors.length];
-});
-</script>
-
-<style scoped lang="scss">
-.avatar {
-	position: relative;
-	cursor: pointer;
-
-	.avatar-image {
-		position: relative;
-		overflow: hidden;
-		border-radius: 50%;
-		vertical-align: bottom;
-	}
-
-	.avatar-text {
-		color: white;
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.online {
-		position: absolute;
-		right: -10%;
-		bottom: 0;
-		width: 24rpx;
-		height: 24rpx;
-		background: limegreen;
-		border-radius: 50%;
-		border: 6rpx solid white;
-	}
-}
+<template>
+	<view class="avatar  none-pointer-events" @click="showUserInfo" :title="name">
+		<image v-if="url" class="avatar-image" :src="url" :style="avatarImageStyle" lazy-load="true"
+			mode="aspectFill" />
+		<view v-else class="avatar-text" :style="avatarTextStyle">
+			{{ name?.substring(0, 1).toUpperCase() }}
+		</view>
+		<view v-if="online" class="online" title="用户当前在线" />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+	id?: number;
+	size?: number | string;
+	url?: string;
+	name?: string;
+	radius?: string;
+	online?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 'default',
+	name: '',
+	radius: "50%",
+	online: false
+});
+
+interface Emits {
+	(e: 'click', id: number): void
+}
+const emit = defineEmits<Emits>()
+
+const colors = [
+	"#5daa31", "#c7515a", "#e03697", "#85029b",
+	"#c9b455", "#326eb6"
+];
+
+const showUserInfo = () => {
+	if (props.id && props.id > 0) {
+		// TODO:组件化
+		// uni.navigateTo({ url: "/pages/common/user-info?id=" + props.id });
+		emit('click', props.id)
+	}
+};
+
+const _size = computed(() => {
+	if (typeof props.size === 'number') {
+		return props.size;
+	} else if (typeof props.size === 'string') {
+		const sizeMap: Record<string, number> = {
+			'default': 96,
+			'small': 84,
+			'smaller': 72,
+			'mini': 60,
+			'minier': 48,
+			'lage': 108,
+			'lager': 120,
+		};
+		return sizeMap[props.size] || 96;
+	}
+	return 96;
+});
+
+const avatarImageStyle = computed(() => {
+	return `width:${_size.value}rpx;height:${_size.value}rpx;`;
+});
+
+const avatarTextStyle = computed(() => {
+	return `width: ${_size.value}rpx;
+          height:${_size.value}rpx;
+          background: linear-gradient(145deg,#ffffff20 25%,#00000060),${textColor.value};
+          font-size:${_size.value * 0.45}rpx;
+          border-radius: ${props.radius};`;
+});
+
+const textColor = computed(() => {
+	if (!props.name) {
+		return '#fff';
+	}
+	let hash = 0;
+	for (let i = 0; i < props.name.length; i++) {
+		hash += props.name.charCodeAt(i);
+	}
+	return colors[hash % colors.length];
+});
+</script>
+
+<style scoped lang="scss">
+.avatar {
+	position: relative;
+	cursor: pointer;
+
+	.avatar-image {
+		position: relative;
+		overflow: hidden;
+		border-radius: 50%;
+		vertical-align: bottom;
+	}
+
+	.avatar-text {
+		color: white;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.online {
+		position: absolute;
+		right: -10%;
+		bottom: 0;
+		width: 24rpx;
+		height: 24rpx;
+		background: limegreen;
+		border-radius: 50%;
+		border: 6rpx solid white;
+	}
+}
 </style>