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切换，默认状态不显示，选中状态下显示
