feat(userhead): 增加移动端头像组件 (#5)

Signed-off-by: MNZhu <[email protected]>

Author: MNZhu

src/user-head/index.js

@@ -1,21 +1,25 @@
 /**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
-export const computedStyle = ({ state, props }) => () => ({
-  fill: props.color,
-  color: props.color,
-  backgroundColor: props.backgroundColor,
-  backgroundImage: /^(image)$/.test(props.type) && state.internalValue ? `url(${state.internalValue})` : 'none'
-})
+export const computedStyle =
+  ({ state, props }) =>
+  () => {
+    return {
+      fill: props.color,
+      color: props.color,
+      backgroundColor: props.backgroundColor,
+      backgroundImage: /^(image)$/.test(props.type) && state.internalValue ? `url(${state.internalValue})` : 'none'
+    }
+  }
 
 export const computedMessage = (props) => () => {
   let result = ''
@@ -32,27 +36,32 @@ export const computedMessage = (props) => () => {
   return result
 }
 
-export const computedFontSize = ({ props, state }) => () => {
-  let fontSize = ''
+export const computedFontSize =
+  ({ props, state }) =>
+  () => {
+    let fontSize = ''
+
+    if (props.type === 'label' && state.label && !props.min) {
+      const length = state.label.length
+      const sizeMap = {
+        1: '40px',
+        2: '30px',
+        3: '22px',
+        4: '20px',
+        5: '18px',
+        6: '16px'
+      }
 
-  if (props.type === 'label' && state.label && !props.min) {
-    const length = state.label.length
-    const sizeMap = {
-      1: '40px',
-      2: '30px',
-      3: '22px',
-      4: '20px',
-      5: '18px',
-      6: '16px'
+      fontSize = sizeMap[length]
     }
 
-    fontSize = sizeMap[length]
+    return { fontSize }
   }
 
-  return { fontSize }
-}
-
-export const computedLabel = ({ state, props }) => () => (props.min ? state.internalValue.substr(0, 2) : state.internalValue.substr(0, 6))
+export const computedLabel =
+  ({ state, props }) =>
+  () =>
+    props.min ? state.internalValue.substr(0, 2) : state.internalValue.substr(0, 6)
 
 export const getInternalValue = (props) => () => {
   if (!props.modelValue) {
@@ -69,3 +78,27 @@ export const getInternalValue = (props) => () => {
     return props.modelValue
   }
 }
+
+export const computedSize =
+  ({ props, state }) =>
+  () => {
+    let size = props.size
+
+    if (typeof size === 'string') {
+      switch (size) {
+        case 'large':
+          size = 64
+          break
+        case 'medium':
+          size = 40
+          break
+        case 'small':
+          size = 22
+          break
+        default:
+          size = 40
+          break
+      }
+    }
+    return size
+  }

src/user-head/vue.js

@@ -1,16 +1,16 @@
 /**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
-import { computedMessage, computedStyle, computedFontSize, computedLabel, getInternalValue } from './index'
+import { computedMessage, computedStyle, computedFontSize, computedLabel, getInternalValue, computedSize } from './index'
 
 export const api = ['state']
 
@@ -24,14 +24,16 @@ export const renderless = (props, { reactive, computed }) => {
     label: computed(() => api.computedLabel()),
     style: computed(() => api.computedStyle()),
     message: computed(() => api.computedMessage()),
-    fontSize: computed(() => api.computedFontSize())
+    fontSize: computed(() => api.computedFontSize()),
+    size: computed(() => api.computedSize())
   })
 
   Object.assign(api, {
     state,
     computedLabel: computedLabel({ state, props }),
     computedStyle: computedStyle({ state, props }),
-    computedFontSize: computedFontSize({ props, state })
+    computedFontSize: computedFontSize({ props, state }),
+    computedSize: computedSize({ props, state })
   })
 
   return api