10. 原生开关实现

一、前言

开关在前端中算是比较常用的组件之一,目前我见到其最广泛的用途是用在切换网站主题上的。

比如vue官网切换主题用的就是开关组件:

image-20231201160209141

而且它这个开关组件还添加了图标样式。

本文的目标就是用html、css、js来实现一个与它一模一样的开关主键。

二、代码实现

开关组件在html中是没有原生标签的,所以这次我们直接使用div标签实现即可。

老规矩,还是先写好基本的代码:

image-20231201160720173

首先第一步,将div的基本样式先写好:

image-20231201161037994

主要是设置它的背景颜色、宽高、边框圆角、鼠标样式。

并且为它设置了一个相对定位,其目的是为了后面在它内部动态插入图标。

至于transition属性,则是用来设置变换动画的,比如这里的意思是设置背景颜色在0.5s内完成变化,这样的效果就是,一旦后面我们修改它的背景色,它不会立即变色,而是在0.5内完成缓慢变色。

然后下一步,我们还要在它内部写一个标签,用来存放图标:

image-20231201162418575

这里在它内部写了一个span标签,用于存放图标,而主要的逻辑在js代码中:

首先是一个status变量,用于存放我们这个组件的开关状态。

然后是从网上复制的月亮与太阳图标代码:

image-20231201162753267

这是用的svg格式完成的图标绘制,svg也可以看做是一个标签,只不过这里由于是js代码,用字符串形式存储比较方便。

注意以前我们使用的可能都是单引号、双引号的字符串,这里用的是键盘左上角的那个符号,可以使用换行的字符串形式。

然后下一步,使用icon标签上的innerHtml属性等于Sunny这个字符串,浏览器就会自动将这个字符串解析为标签作为它的内容:

image-20231201163337493

正如刚才所说,svg也是一个标签,只不过稍微比较特别,它是用来画图的,一般我们都是直接网上去搜相关的svg图标复制下来就可以使用,也不用太过于纠结。

最后,我还为switch这个标签,也就是s这个变量,添加了一个点击事件,目的就是切换图标。

此时只要你在浏览器中点击它,它就会在两种图标中切换:

image-20231201163604760

但这样太难看了,所以下一步,我们要给它添加样式:

image-20231201163824886

首先是定位,因为外面父标签前面我们已经写好了相对定位,所以这里子标签直接绝对定位即可,并且调整好它的位置。

宽度、高度、行内块模式比较简单,span默认是行内模式,要切换为行内块模式才能设置宽高。

圆角刚好为宽高的一半,也就是圆形,背景色就不说了,最后又设置了一个transition,并且这次是两个属性变化均在0.5s内完成:leftbackground-color

目前我们还看不出这个属性的作用,不过后面我们马上就能看出来了。

最后还设置了一下svg标签的宽高与外边距,目的是把它放在圆正中间的位置。

此时点击它就能看到两个图标互相变化,效果已经算不错了。

然后下一步,我们还需要让其变色、并且动起来!

首先,我们得为它动态添加类:

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux