使用Vue3封装的切换主题开关

组件介绍

第一次封装正经组件，更加深刻地感受到了Vue的强大及其带来的便利，记录一下😄打算多搞几个练Vue3

这是一个绑定了两个自定义事件、两个具名插槽的组件，可以切换白天、黑夜两种状态，因为放了两个slot插槽因此支持自定义状态标识

食用方法

1.由于使用的是具名插槽，因此需要在该组件注册至父组件后，在组件内放入两个带有v-slot的template标签
2.需要通过v-slot传值day、night来分别表示白天与黑夜的主题
3.day与night需要是一个函数
4.若插槽内不传入任何内容，则默认补充汉字“日”与“月”

码上掘金

码上掘金可以嵌套组件吗？这样似乎不好展示效果

代码

组件：

• 组件内对可能会发生样式变化的容器设置了transition并设置在0.3s完成过渡
• 组件内使用了ref来获取DOM节点
• 为了增加稍微丝滑一点的效果，开关中间的圆形按钮会变宽后变窄
• situation是非常重要的变量，表示目前的主题状态，当发生改变时将调用父组件传入的对应函数day或night，且容器样式将会发生改变