【如何写一个自己想要的组件库】二次元UI框架——Thunder Design

Thunder Design 

二次元UI框架，目前选择的为初音未来版本。图标来源网上http://sc.xzcheng.com/biaoqing/84543.html，暂未找到画师，如知晓画师请告知，若画师有任何意见，会修改删除任何与图标相关的。

以UI框架为思路进行设计，UI框架的搭建参考https://juejin.im/post/6844904000655998984，感谢大佬！

目前支持 Alert 警告，BackTop 回到顶部，Button 按钮，Card 卡片，Checkbox 多选，Icon 图标，Input 输入框，Loading 加载中，Message 消息提示，Modal 对话框，Radio 单选，Switch 开关，Tag 标签，Tooltip 文字提示

demo网站为http://42.192.82.22/dist/，欢迎查看使用，提出建议及问题！

github地址为https://github.com/yuriaFan/Thunder_Design，欢迎star⭐，谢谢大佬！

整个项目的结构参考上方链接，就每个组件.vue文件谈谈自己的思路，个人略见，欢迎交流
以最简单的Icon开始举例：
将公用方法写在名为utils的文件夹下index.js或utils.js文件中，而在其中控制展现不同样式的icon的即为vue中的props，如大小、样式等，而检测传入的值是否合法就可以写一个公用方法：oneOf（其中这个方法参考iView）

import {
    oneOf
} from "../../../src/utils/index";

通过oneOf，即可判断参数是否是设定之一即是否合法

export function oneOf(value, validList) {
    for (let i = 0; i < validList.length; i++) {
        if (value === validList[i]) {
            return true;
        }
    }
    return false;
}

之后就可以在props中设置想要的样式

        size: {
            validator: (value) => {
                return oneOf(value, ["default", "little", "large", "increase"]);
            },
            type: String,
            default: "default",
        },

其中props有一些属性能够控制，可到vue的官网上查找

那么在设定了props后想要控制props对应的样式，如上方设定的size大小的样式，即可书写到computed中

      iconStyle() {
            return ["icon", "icon-base-" + this.size];
      },

通过在HTML中绑定相关的计算出的样式，即可控制属性对应的样式展现

    <img :class="iconStyle" :src="imgSrc" />

当然这是最基础的组件书写方式，而通过书写一个个组件，也可通过组件间的相互引用更加快速的开发。
如果想要学会更多，个人推荐的是直接去看相关的组件库源码，大佬们的书写方式和结构都能让人受益匪浅。

当然，如果你有对二次元组件库的需求，欢迎star⭐和安装使用！这个较为简略的库也会在之后有空的时间里进行维护更新。