原生js如何封装一个组件

Question

如题，本人对js不熟悉，只是偶尔用用。
目前select组件需要重构，效果如图：

数据传进去，或者根据网址获取即可。点击全部的时候，最好可以把下拉框中每个item的value，作为全部的value，可以用“，”分割。
大家有没有相关封装实例，或指导。
我知道我目前的做法肯定不对，但没办法为了先实现需求。
我是用对象的形式
代码就不贴了，大家会笑掉牙。

Answer 1

vue 就看 elementui 源码
js、jquery 就看 bootstrap 源码

---

从 vue 个规则上说

[
    {
        label: '选项一',
        value: '选项一',
    }
]

表示一个选项，那么无非是

[
    {
        label: '选项一',
        value: '选项一',
    },
    {
        label: '选项二',
        value: '选项二',
    },
    {
        label: '全部',
        value: '选项一，选项二',
    }
]