一、前言
开关在前端中算是比较常用的组件之一,目前我见到其最广泛的用途是用在切换网站主题上的。
比如vue官网切换主题用的就是开关组件:
而且它这个开关组件还添加了图标样式。
本文的目标就是用html、css、js来实现一个与它一模一样的开关主键。
二、代码实现
开关组件在html中是没有原生标签的,所以这次我们直接使用div
标签实现即可。
老规矩,还是先写好基本的代码:
首先第一步,将div
的基本样式先写好:
主要是设置它的背景颜色、宽高、边框圆角、鼠标样式。
并且为它设置了一个相对定位,其目的是为了后面在它内部动态插入图标。
至于transition
属性,则是用来设置变换动画的,比如这里的意思是设置背景颜色在0.5s
内完成变化,这样的效果就是,一旦后面我们修改它的背景色,它不会立即变色,而是在0.5
内完成缓慢变色。
然后下一步,我们还要在它内部写一个标签,用来存放图标:
这里在它内部写了一个span
标签,用于存放图标,而主要的逻辑在js代码中:
首先是一个status
变量,用于存放我们这个组件的开关状态。
然后是从网上复制的月亮与太阳图标代码:
这是用的svg
格式完成的图标绘制,svg
也可以看做是一个标签,只不过这里由于是js代码,用字符串形式存储比较方便。
注意以前我们使用的可能都是单引号、双引号的字符串,这里用的是键盘左上角的那个符号,可以使用换行的字符串形式。
然后下一步,使用icon
标签上的innerHtml
属性等于Sunny
这个字符串,浏览器就会自动将这个字符串解析为标签作为它的内容:
正如刚才所说,svg
也是一个标签,只不过稍微比较特别,它是用来画图的,一般我们都是直接网上去搜相关的svg
图标复制下来就可以使用,也不用太过于纠结。
最后,我还为switch
这个标签,也就是s
这个变量,添加了一个点击事件,目的就是切换图标。
此时只要你在浏览器中点击它,它就会在两种图标中切换:
但这样太难看了,所以下一步,我们要给它添加样式:
首先是定位,因为外面父标签前面我们已经写好了相对定位,所以这里子标签直接绝对定位即可,并且调整好它的位置。
宽度、高度、行内块模式比较简单,span
默认是行内模式,要切换为行内块模式才能设置宽高。
圆角刚好为宽高的一半,也就是圆形,背景色就不说了,最后又设置了一个transition
,并且这次是两个属性变化均在0.5s
内完成:left
与background-color
目前我们还看不出这个属性的作用,不过后面我们马上就能看出来了。
最后还设置了一下svg
标签的宽高与外边距,目的是把它放在圆正中间的位置。
此时点击它就能看到两个图标互相变化,效果已经算不错了。
然后下一步,我们还需要让其变色、并且动起来!
首先,我们得为它动态添加类: