小而美的IKUN-UI组件库源码学习（前言）

“我很想知道为什么”

---

🐥坤-UI是由vue3和vitejs搭建的简易组件库 🏀，身为一名合格 IKUN，我得学习学习这款专门为我偶像打造的精美组件库。

来看到其组件使用文档：

组件分成了这四类：虽然量不多，但是帅呀！！！

• 通用
  

• 数据录入
  

• 数据展示
  

• 信息反馈
  

接着就来看到其项目文件的组织方式：

- dev
  组件调用测试面板
- docs
  组件使用文档
- packages  组件源码
  - ikui-components
  - ikui-theme
  - utils
- scripts
  项目打包相关

utils / install.ts

import { App } from 'vue'

export const withInstall = (main) => {
  main.install = (app: App): void => {
    app.component(main.name, main)
  }
  return main
}

这里是封装了一个简化组件组成的工具函数 withInstall，该工具函数接受一个参数 main，main 应该是一个 Vue 组件，main.install 为main组件添加了一个install方法，这个方法接受一个参数app，类型为APP，return main ，withInstall 函数返回 main 组件。这意味着 main 组件现在具有一个 install 方法，可以在Vue应用中使用。

再看到组件的样式组织

ikui-theme 文件夹

mixins 文件夹

common.scss

.ik-shadow__average {
  box-shadow: -10px 0 10px rgb(0 0 0 / 12%), 10px 0 10px rgb(0 0 0 / 12%), 0 -10px 10px rgb(0 0 0 / 12%),
    0 10px 10px rgb(0 0 0 / 12%);
}

config.scss

// $default: #f0f0f0;
// $primary: #cd8025;
// $success: #01847f;
// $warning: #fbD26a;
// $danger: #470024;
// $info: #4341bd;

$qianyun: #eaecf1; // 浅云
// $rimu: #cd8025; // 日暮
$rimu: #6379f6; // 绀宇
$tianshuibi: #5aa4ae; // 天水碧
$zhuyantuo: #f29a76; // 朱颜砣
$shiliuqun: #b13b2e; // 石榴裙
$mushanzi: #a4abd6; // 暮山紫

$default: $qianyun;
$primary: $rimu;
$success: $tianshuibi;
$warning: $zhuyantuo;
$danger: $shiliuqun;
$info: $mushanzi;

// button hover
$button-lighter--default: lighten($default, 3%);
$button-lighter--primary: lighten($primary, 3%);
$button-lighter--info: lighten($info, 3%);
$button-lighter--success: lighten($success, 3%);
$button-lighter--warning: lighten($warning, 1%);
$button-lighter--danger: lighten($danger, 2%);

// button active
$button-darker--default: darken($default, 3%);
$button-darker--primary: darken($primary, 2%);
$button-darker--info: darken($info, 3%);
$button-darker--success: darken($success, 2%);
$button-darker--warning: darken($warning, 4%);
$button-darker--danger: darken($danger, 2%);

// 不同类型的颜色状态
$allColors: (
  (
    name: 'default',
    // 默认背景色
    default: $default,
    // hover
    // simple: $button-lighter--default,
    defaultTextColor: #333,
    // hover 状态背景色
    defaultHover: $button-lighter--default,
    // Active 状态背景色
    defaultActive: $button-darker--default,
  ),
  (
    name: 'primary',
    default: $primary,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--primary,
    defaultActive: $button-darker--primary,
  ),
  (
    name: 'info',
    default: $info,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--info,
    defaultActive: $button-darker--info,
  ),
  (
    name: 'success',
    default: $success,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--success,
    defaultActive: $button-darker--success,
  ),
  (
    name: 'warning',
    default: $warning,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--warning,
    defaultActive: $button-darker--warning,
  ),
  (
    name: 'danger',
    default: $danger,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--danger,
    defaultActive: $button-darker--danger,
  )
);

// *::selection {
//   background-color: $button-lighter--primary;
// }

$border-radius--size: 6px;

transition.scss

// drawer ============================= start
// mask
.drawer-fade-enter-active,
.drawer-fade-leave-active {
  transition: all 0.28s;
}

.drawer-fade-enter-from,
.drawer-fade-leave-to {
  opacity: 0;
}

.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: all 0.28s;
}
.drawer-slide-enter-from,
.drawer-slide-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.drawer-slide__right-enter-active,
.drawer-slide__right-leave-active {
  opacity: 1;
  transition: all 0.28s;
}
.drawer-slide__right-enter-from,
.drawer-slide__right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.drawer-slide__top-enter-active,
.drawer-slide__top-leave-active {
  opacity: 1;
  transition: all 0.28s;
}
.drawer-slide__top-enter-from,
.drawer-slide__top-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}

.drawer-slide__bottom-enter-active,
.drawer-slide__bottom-leave-active {
  opacity: 1;
  transition: all 0.28s;
}
.drawer-slide__bottom-enter-from,
.drawer-slide__bottom-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
// drawer ============================= end

// lockScreen ============================= start
.lockScreen-enter-active,
.lockScreen-leave-active {
  transition: all 0.32s;
}
.lockScreen-enter-from,
.lockScreen-leave-to {
  opacity: 0;
  transform: translateY(-80%);
}
// lockScreen ============================= end

// tag =================================== start
.tag-fade-enter-active {
  animation: tag-bounce-in 0.24s;
}
.tag-fade-leave-active {
  animation: tag-bounce-in 0.22s reverse;
}
@keyframes tag-bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

// tag =================================== end

var.scss

$qianyun: #eaecf1; // 浅云
$rimu: #6379f6; // 绀宇
$tianshuibi: #5aa4ae; // 天水碧
$zhuyantuo: #f29a76; // 朱颜砣
$shiliuqun: #b13b2e; // 石榴裙
$mushanzi: #a4abd6; // 暮山紫

$default: $qianyun;
$primary: $rimu;
$success: $tianshuibi;
$warning: $zhuyantuo;
$danger: $shiliuqun;
$info: $mushanzi;

:root {
  --default-color: #eaecf1;
  --primary-color: #6379f6;
  --success-color: #5aa4ae;
  --warning-color: #f29a76;
  --danger-color: #b13b2e;

  --button-plain-bg: #fff;

  // hover
  --default-color-lighter-1: #f3f4f7;
  --primary-color-lighter-1: #7185f7;
  --success-color-lighter-1: #64aab3;
  --warning-color-lighter-1: #f29d7b;
  --danger-color-lighter-1: #b93e30;
  // active
  --default-color-darker-1: #e1e4eb;
  --primary-color-darker-1: #5971f5;
  --success-color-darker-1: #54a0aa;
  --warning-color-darker-1: #f08c63;
  --danger-color-darker-1: #a9382c;

  --primary-color-hover: #e8ebfb;

  --default-radius: 6px;
  --default-round-radius: 24px;

  // disabled
  --default-color-lighter-2: #f1f2f5;
  --primary-color-lighter-2: #6d85ff;
  --success-color-lighter-2: #8dc0c7;
  --warning-color-lighter-2: #efa384;
  --danger-color-lighter-2: #d44737;

  --primary-color-lighter-3: #7791ff;
  --primary-color-lighter-4: #8ba9ff;
  --primary-color-lighter-5: #9ec2ff;
  --primary-color-lighter-6: #b2daff;
  --primary-color-lighter-7: #bee8ff;

  --success-color-lighter-3: #64aab3;
  --success-color-lighter-4: #64aab3;
  --success-color-lighter-5: #64aab3;
  --success-color-lighter-6: #64aab3;
  --success-color-lighter-7: #64aab3;

  --danger-color-lighter-3: #f85340;
  --danger-color-lighter-4: #ff5e4a;
  --danger-color-lighter-5: #ff644e;
  --danger-color-lighter-6: #ff6a53;
  --danger-color-lighter-7: #ff7057;
}

:root {
  --input-default-border-color: #dde0e5;
  --input-hover-border-color: #dde0e5;

  --default-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);

  // select
  --select-inner-bg: #fff;
  --select-inner-color: #333;
  --select-options-bg: #fff;

  // switch
  --switch-bg-on-color: var(--primary-color);
  --switch-bg-off-color: var(--default-color-darker-1);

  // model
  --drawer-body-bg: #fff;

  // tabs
  --tabs-header-bg: #f5f5f5;
  --tabs-header-block-bg: #fff;
}

.dark {
  // button
  --default-color: #525354;
  --default-color-darker-1: #333;
  --default-color-lighter-1: #444;
  --default-color-lighter-2: #666;
  --button-plain-bg: transparent;

  // select
  --select-inner-bg: #333;
  --select-inner-color: #c7c7c7;
  --select-options-bg: #333;

  // model
  --drawer-body-bg: #333;

  // tabs
  --tabs-header-bg: #333;
  --tabs-header-block-bg: #666;
}