switch

用CSS控制开关变化，为了让外部知道switch状态，添加了value和input属性，value控制每一次的状态，在每次触发之后会更新，添加了input事件，可以通过$event拿到最新的值
让switch发出Input事件 用context.emit('input‘）

button

在 export default 的props里声明button的所有样式，样式包括样式类型和默认样式。
因为样式过多，如果都写到button的:class里容易混乱，所以使用计算属性
computed

<template>
  <button class="neko-button" :class="classes" :disabled="disabled">
</template>

<script lang="ts">
 setup(props) {
     const { theme, size, level, other } = props;
     const classes = computed(() => {
        return {
          [`neko-theme-${theme}`]: theme,
          [`neko-size-${size}`]: size,
          [`neko-level-${level}`]: level,
          [`neko-other-${other}`]: other,
        };
      });

loading按钮里面有个旋转的动画 用span 所以在Button里写
<span v-if="loading" class="neko-loadingIndicator"></span>
在Loading里才会显示那个span （显示中指示器）

Dialog

Dialog应该有两部分，一个是阴影遮罩层，一个是组件本体
给Dialog添加属性visible，boolean类型，表示我们是否能看见这个弹窗。因为这个弹窗包括阴影遮罩层占据了整个页面，所以在<template>外面再加一层<template>。

<template>
  <template> 
   </template>
</template>

添加close事件让弹窗关闭，在遮罩层添加函数onclickoverlay，控制点击遮罩层是否关闭

 const close = () => {
        context.emit("update:visible", false);
      };

弹框的标题和内容用插槽来写，避免混乱，用具名插槽
外面用v-slot:xxx里面写上slot name=“xxx”

一句话打开dialog 用h函数。用render去构造节点，返回3个参数 第一个是Dialog，第二个是监听visible，让他支持关闭事件，因为titile和content是插槽插进来的，是函数，所以写在第三个参数里

 const app = createApp({
        render() {
            return h(
                Dialog,
                {
                    visible: true,
                    'onUpdate:visible': (newVisible) => {
                        if (newVisible === false) {
                            close();
                        }
                    },
                }, {
                title, content
            })
        }
    })
    app.mount(div)

Tabs

先确认用户写的是Tab标签，通过context.slot.default()数组检查类型，然后用CSS切换，默认状态不显示，选中状态下显示