组件介绍

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

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

食用方法

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

码上掘金

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

代码

组件：

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

<template lang=""><div class="slip-outer"><div class="slip-block" ref="block"></div><div class="inner"><div class="day" ref="day" @click="changeToDay"><slot name="day">日</slot></div><div class="night" ref="night" @click="changeToNight"><slot name="night">月</slot></div></div></div>
</template>
<script> import { ref, watch } from 'vue'export default {name: 'ChangeStyle',setup(props, context) {let situation = ref(true)const block = ref(null)const day = ref(null)const night = ref(null)function changeToDay() {if (!situation.value) {situation.value = true}}function changeToNight() {if (situation.value) {situation.value = false}}function changeWidth() {block.value.style.width = '50px'setTimeout(() => {block.value.style.width = '30px'}, 80)}watch(situation, (newValue) => {changeWidth()if (newValue === true) {context.emit('day')block.value.style.left = '2px'block.value.style.backgroundColor='#fff'night.value.style.color = '#000'} else {context.emit('night')block.value.style.left = '38px'block.value.style.backgroundColor='#000'night.value.style.color = '#fff'}})return {changeToDay,changeToNight,block,night,day,situation}}} </script>
<style scoped> .slip-outer {height: 30px;width: 70px;border-radius: 15px;background-color: rgb(221, 221, 221);box-shadow: 0px 2px 5px rgb(140, 140, 140) inset;position: relative;}.slip-block {height: 26px;width: 30px;border-radius: 13px;background-color: #fff;position: absolute;z-index: 0;top: 2px;left: 2px;box-shadow: 0px 2px 2px rgb(140, 140, 140);transition: 0.3s;}.inner {display: flex;width: 70px;cursor: pointer;}.inner div {z-index: 1;width: 50%;line-height: 30px;text-align: center;} </style>

使用实例：

该实例展示的是父组件中使用如上组件的情况
可以像下方实例那样使用CSS变量来更方便地控制主题色（:root与.demo中背景色的内容）
函数day与night在控制CSS变量以快速且方便地控制主题色

<template lang=""><div><ChangeStyle @day="day" @night="night"><template v-slot:day>231</template><template v-slot:night>132</template></ChangeStyle><div class="demo" ref:demo></div></div>
</template>
<script> import ChangeStyle from './ChangeStyle.vue';import { ref } from 'vue'export default {name: 'DemoDoc',components: {ChangeStyle},setup(props) {const demo = ref(null)function day() {console.log('day');document.documentElement.style.setProperty('--theme','#fff')}function night() {console.log('night');document.documentElement.style.setProperty('--theme','#000')}return {day,night,demo}}} </script>
<style scoped> :root {--theme: '#fff';}.demo {width: 100px;height: 100px;background-color: var(--theme);border: 1px solid #000;} </style>