perf: 本次性能优化，包的体积从**174kb**降低到了**171kb**，基本上都是几十个字节几十个字节的减少的

Author: Tyh2001

CHANGELOG.md

@@ -1,5 +1,18 @@
 # 更新日志
 
+## 3.3.7 (2022-03-09)
+
+- 优化了所有组件的 index.js 文件注册组件代码，降低代码可读性，但是减少了包的体积
+- TyhButton 组件的样式有略微的调整
+- TyhButton 组件的 icon 更改了渲染方式
+- Container 布局容器组件的 `<tyh-container>：外层容器` 做了较大的调整，现在根据其内部的子元素来自动判断容器的排列方向
+- 废除了 tyh-container 的 flex 配置项
+- 新增 tyh-container 的 direction 配置项
+- TyhBackTop 组件的 bottom 和 right 属性现在必须要传递一个`字符串`的指定距离
+- TyhDivision 组件的 margin 属性现在必须要传递一个`字符串`的指定距离
+- 还有其他若干出代码简化写法
+- 本次性能优化，包的体积从**174kb**降低到了**171kb**，基本上都是几十个字节几十个字节的减少的
+
 ## 3.3.6 (2022-03-08)
 
 - 修复 TyhDrawer 组件的样式

src/App.vue

@@ -1,20 +1,13 @@
 <template>
-  <tyh-button icon="tyh-ui-setting-filling">设置</tyh-button>
-  <tyh-button icon="tyh-ui-tyhui" type="primary">tyh-ui</tyh-button>
-  <tyh-button icon="tyh-ui-fabulous" type="success"></tyh-button>
-  <tyh-button icon="tyh-ui-discount" type="danger"></tyh-button>
-  <tyh-button icon="tyh-ui-chart-bar" type="warning"></tyh-button>
-
-  <tyh-button simple icon="tyh-ui-setting-filling">设置</tyh-button>
-  <tyh-button simple icon="tyh-ui-tyhui" type="primary">tyh-ui</tyh-button>
-  <tyh-button simple icon="tyh-ui-fabulous" type="success"></tyh-button>
-  <tyh-button simple icon="tyh-ui-discount" type="danger"></tyh-button>
-  <tyh-button simple icon="tyh-ui-chart-bar" type="warning"></tyh-button>
-  <Tiger />
+  <tyh-division
+    color="blue"
+    margin="30px"
+  >
+    这是左边文字
+  </tyh-division>
 </template>
 
 <script setup>
-import Tiger from './demo/tiger.vue'
 </script>
 
 <style scoped>

src/packages/tyhUi/packages/button/style/index.css src/packages/THEME_STYLE/buttton/style/index.css

@@ -1,7 +1,7 @@
 .tyh-button {
   min-width: 40px;
   padding: 0 22px;
-  height: 35px;
+  min-height: 35px;
   border-radius: 5px;
   cursor: pointer;
   user-select: none;

src/packages/tyhUi/packages/button/style/index.less src/packages/THEME_STYLE/buttton/style/index.less

@@ -19,7 +19,7 @@
 .tyh-button {
   min-width: 40px;
   padding: 0 22px;
-  height: 35px;
+  min-height: 35px;
   border-radius: 5px;
   cursor: pointer;
   user-select: none;
@@ -184,6 +184,6 @@
   border-radius: 0;
 }
 
-.tyh-button [class*='tyh-icon'] + span {
+.tyh-button [class*='tyh-icon']+span {
   margin-left: 5px;
 }

src/packages/THEME_STYLE/crumbs-item/style/index.css

@@ -11,6 +11,7 @@
   width: 28px;
   display: inline-block;
   text-align: center;
+  color: #C0C4CC;
 }
 .tyh-crumbs-item:last-child .tyh-icon {
   display: none;

src/packages/THEME_STYLE/crumbs-item/style/index.less

@@ -11,6 +11,7 @@
     width: 28px;
     display: inline-block;
     text-align: center;
+    color: #C0C4CC;
   }
 }
 

src/packages/tyhUi/package.json

@@ -1,42 +1 @@
-{
-  "name": "tyh-ui2",
-  "version": "3.3.7",
-  "description": "The next generation ui component library of tyh-ui is based on vue3 Version, fully embrace vue3.",
-  "main": "src/index.js",
-  "scripts": {
-    "test": "npm i tyh-ui2"
-  },
-  "keywords": [
-    "ui",
-    "tyh",
-    "tyh-ui",
-    "tyh-ui2",
-    "vue",
-    "vue3",
-    "setup",
-    "Composition API",
-    "component",
-    "components",
-    "vue-next",
-    "css",
-    "css3",
-    "less",
-    "web",
-    "html",
-    "javascript",
-    "element",
-    "element3",
-    "element-plus",
-    "element-ui"
-  ],
-  "author": {
-    "name": "tyh2001",
-    "url": "https://tianyuhao.cn"
-  },
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/Tyh2001/tyh-ui/issues"
-  },
-  "homepage": "https://tianyuhao.cn/v3",
-  "repository": "https://github.com/Tyh2001/tyh-ui"
-}
+{"name":"tyh-ui2","version":"3.3.7","description":"The next generation ui component library of tyh-ui is based on vue3 Version, fully embrace vue3.","main":"src/index.js","scripts":{"test":"npm i tyh-ui2"},"keywords":["ui","tyh","tyh-ui","tyh-ui2","vue","vue3","setup","Composition API","component","components","vue-next","css","css3","less","web","html","javascript","element","element3","element-plus","element-ui"],"author":{"name":"tyh2001","url":"https://tianyuhao.cn"},"license":"ISC","bugs":{"url":"https://github.com/Tyh2001/tyh-ui/issues"},"homepage":"https://tianyuhao.cn/v3","repository":"https://github.com/Tyh2001/tyh-ui"}

src/packages/tyhUi/packages/alert/TyhAlert.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   type: {
     type: String,
     default: 'default',
-    validator(v) {
+    validator (v) {
       return ['default', 'primary', 'success', 'danger', 'warning'].includes(v)
     }
   },
@@ -31,10 +31,8 @@ const props = defineProps({
   simple: Boolean
 })
 const emit = defineEmits(['close'])
-
 const { THEME, isClass, isStyle, isMessageStyle } = _TyhAlert()
-
-function _TyhAlert() {
+function _TyhAlert () {
   const BACKGROUND_THEME = {
     primary: '#e8f4ff',
     success: '#e1ffea',
@@ -63,11 +61,6 @@ function _TyhAlert() {
   const isMessageStyle = computed(() => {
     return [{ color: THEME[props.type] }]
   })
-  return {
-    THEME,
-    isClass,
-    isStyle,
-    isMessageStyle
-  }
+  return { THEME, isClass, isStyle, isMessageStyle }
 }
 </script>

src/packages/tyhUi/packages/avatar/TyhAvatar.vue

@@ -5,7 +5,6 @@
         <tyh-icon size="70" :icon="errorIcon || 'tyh-ui-user'" color="#fff" />
       </slot>
     </div>
-
     <img
       v-else
       :draggable="draggable"
@@ -30,7 +29,7 @@ const props = defineProps({
   },
   fit: {
     type: String,
-    validator(v) {
+    validator (v) {
       return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(v)
     }
   },
@@ -42,8 +41,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['error', 'load'])
 const { isError, onError, isSize, errorClass, successClass } = _TyhAvatar()
-
-function _TyhAvatar() {
+function _TyhAvatar () {
   const isError = ref(false)
   const onError = () => {
     emit('error')
@@ -70,12 +68,6 @@ function _TyhAvatar() {
       }
     ]
   })
-  return {
-    isError,
-    onError,
-    isSize,
-    errorClass,
-    successClass
-  }
+  return { isError, onError, isSize, errorClass, successClass }
 }
 </script>

src/packages/tyhUi/packages/back-top/TyhBackTop.vue

@@ -2,8 +2,8 @@
   <div
     v-show="backShow"
     class="tyh-back-top"
-    :style="[{ bottom: `${bottom}px`, right: `${right}px` }]"
-    @click="backTop"
+    :style="{ bottom, right }"
+    @click="toTop"
   >
     <slot />
   </div>
@@ -13,38 +13,40 @@
 import { ref, onMounted } from 'vue'
 defineProps({
   bottom: {
-    type: [String, Number],
-    default: '50'
+    type: String,
+    default: '50px'
   },
   right: {
-    type: [String, Number],
-    default: '50'
+    type: String,
+    default: '50px'
   }
 })
-const backShow = ref(false)
-const handleScroll = () => {
-  let timer = null
-  return function () {
-    if (timer !== null) {
-      clearTimeout(timer)
+const { backShow, toTop } = _TyhBackTop()
+function _TyhBackTop () {
+  const backShow = ref(false)
+  const handleScroll = () => {
+    let timer = null
+    return function () {
+      if (timer !== null) {
+        clearTimeout(timer)
+      }
+      timer = setTimeout(() => {
+        let scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop
+        scrollTop > 100 ? (backShow.value = true) : (backShow.value = false)
+      }, 188)
     }
-    timer = setTimeout(() => {
-      let scrollTop =
-        document.documentElement.scrollTop || document.body.scrollTop
-      scrollTop > 100 ? (backShow.value = true) : (backShow.value = false)
-    }, 188)
   }
+  const toTop = () => {
+    let top = document.documentElement.scrollTop || document.body.scrollTop
+    const timeTop = setInterval(() => {
+      document.body.scrollTop = document.documentElement.scrollTop = top -= 50
+      if (top <= 0) {
+        clearInterval(timeTop)
+      }
+    }, 11)
+  }
+  onMounted(() => window.addEventListener('scroll', handleScroll()))
+  return { backShow, toTop }
 }
-const backTop = () => {
-  let top = document.documentElement.scrollTop || document.body.scrollTop
-  const timeTop = setInterval(() => {
-    document.body.scrollTop = document.documentElement.scrollTop = top -= 50
-    if (top <= 0) {
-      clearInterval(timeTop)
-    }
-  }, 11)
-}
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll())
-})
 </script>

src/packages/tyhUi/packages/button/TyhButton.vue

@@ -1,10 +1,7 @@
 <template>
   <button :class="isClass" :disabled="disabled">
-    <!-- <tyh-icon v-if="icon" :icon="icon" :color="textColor" size="14" /> -->
-    <i :class="['tyh-icon', `${icon}`]" />
-    <span v-if="$slots.default" :style="[{ color: textColor }]">
-      <slot />
-    </span>
+    <i v-if="icon" :class="['tyh-icon', `${icon}`]" :style="{ color }" />
+    <span v-if="$slots.default" :style="{ color }"><slot /></span>
   </button>
 </template>
 
@@ -31,7 +28,7 @@ const props = defineProps({
   simple: Boolean
 })
 
-const { textColor, isClass } = _TyhButton()
+const { color, isClass } = _TyhButton()
 function _TyhButton () {
   const THEME = {
     primary: '#3a6ff4',
@@ -41,7 +38,7 @@ function _TyhButton () {
     default: '#3f536e'
   }
 
-  const textColor = computed(() => {
+  const color = computed(() => {
     if (props.simple) return THEME[props.type]
     return props.type === 'default' || !props.type ? '#333' : '#fff'
   })
@@ -64,6 +61,6 @@ function _TyhButton () {
     ]
   })
 
-  return { textColor, isClass }
+  return { color, isClass }
 }
 </script>

src/packages/tyhUi/packages/calendar/TyhCalendar.vue

@@ -19,7 +19,7 @@
           class="tyh-calendar-week-item"
           v-for="(item, index) in 7"
           :key="index"
-          :style="[{ width: `${cellWidth < 28 ? 28 : cellWidth}px` }]"
+          :style="{ width: `${cellWidth < 28 ? 28 : cellWidth}px` }"
         >
           {{ changeWeek(item) }}
         </td>
@@ -57,7 +57,6 @@ const props = defineProps({
     default: 50
   }
 })
-
 const {
   getMonth,
   getYear,
@@ -73,7 +72,7 @@ const {
   getDate
 } = _TyhCalendar()
 
-function _TyhCalendar() {
+function _TyhCalendar () {
   const getMonth = ref(props.modelValue.getMonth())
   const getYear = ref(props.modelValue.getFullYear())
   const getDate = props.modelValue.getDate()
@@ -120,12 +119,10 @@ function _TyhCalendar() {
 
   const nowDateStyle = date => {
     if (date + 1 === props.modelValue.getDate()) {
-      return [
-        {
-          backgroundColor: '#3a6ff4',
-          color: '#fff'
-        }
-      ]
+      return [{
+        backgroundColor: '#3a6ff4',
+        color: '#fff'
+      }]
     }
   }
 

src/packages/tyhUi/packages/container/TyhAside.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside class="tyh-aside" :style="[{ width }]"><slot /></aside>
+  <aside class="tyh-aside" :style="{ width }"><slot /></aside>
 </template>
 
 <script>

src/packages/tyhUi/packages/container/TyhFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="tyh-footer" :style="[{ height }]"><slot /></footer>
+  <footer class="tyh-footer" :style="{ height }"><slot /></footer>
 </template>
 
 <script>

src/packages/tyhUi/packages/container/TyhHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="tyh-header" :style="[{ height }]"><slot /></header>
+  <header class="tyh-header" :style="{ height }"><slot /></header>
 </template>
 
 <script>

src/packages/tyhUi/packages/crumbs-item/TyhCrumbsItem.vue

@@ -4,7 +4,7 @@
     @click="link"
   >
     <span class="tyh-crumbs-item-text"><slot /></span>
-    <tyh-icon color="#C0C4CC" :icon="icon" />
+    <i :class="['tyh-icon', icon]" />
   </span>
 </template>