feat: avatar rounded

kinggq · Aug 23, 2023 · 34f0101 · 34f0101
1 parent 687e246
commit 34f0101
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/packages/avatar/avatar.vue b/packages/avatar/avatar.vue
@@ -11,16 +11,19 @@ const props = withDefaults(
   },
 )
 const size = `${props.size}px`
-function getImageClass() {
-  return `nc-avatar rounded-${props.rounded}px`
+
+const avatarRounded = inject<ComputedRef<number>>('avatar-rounded')
+function getImageStyle() {
+  return `border-radius: ${avatarRounded?.value}px;`
 }
 </script>
 
 <template>
   <div>
     <img
-      :class="getImageClass()"
+      class="nc-avatar"
       :src="url" alt=""
+      :style="getImageStyle()"
     >
   </div>
 </template>

diff --git a/packages/naive-chat/index.vue b/packages/naive-chat/index.vue
@@ -12,8 +12,10 @@ import type { Message, MessageStatus, MessageStore, PullMessageOption, SendOptio
 const props = withDefaults(defineProps<{
   userInfo: UserInfo
   openFirst?: boolean
+  avatarRounded?: number
 }>(), {
   openFirst: true,
+  avatarRounded: 4,
 })
 
 const emits = defineEmits<{
@@ -65,6 +67,7 @@ const lastMessages = computed(
     .sort((a, b) => b.lastTime! - a.lastTime!),
 )
 
+provide('avatar-rounded', computed(() => props.avatarRounded))
 provide('menus', menus)
 provide('message-store', messageStore)
 provide('current-message', currentMessage)

diff --git a/src/App.vue b/src/App.vue
@@ -168,6 +168,14 @@ function handleEventMessageClick() {
 function handleSetValue() {
   naiveChatRef.value?.setValue('you wife is charming')
 }
+
+const rounded = ref(4)
+function handleAvatarRounded() {
+  if (rounded.value === 4)
+    rounded.value = 40
+  else
+    rounded.value = 4
+}
 </script>
 
 <template>
@@ -176,6 +184,7 @@ function handleSetValue() {
     <NaiveChat
       ref="naiveChatRef"
       :user-info="userInfo"
+      :avatar-rounded="rounded"
       @change-contact="changeContact"
       @pull-message="pullMessage"
       @send="send"
@@ -209,6 +218,9 @@ function handleSetValue() {
       <button btn @click="handleSetValue">
         给输入框插入内容
       </button>
+      <button btn @click="handleAvatarRounded">
+        切换头像形状
+      </button>
     </div>
 
     <div mt-50px text="center gray-700 dark:gray-200">