家教网站开发日志（二）

替换Switch开关的字体颜色

官方默认的switch开关是这样的

官方提供两个属性供开发者修改swith开关的背景颜色 

 

但似乎没有专门的属性修改两侧label的字体颜色，同时直接对<el-switch>使用CSS中的color属性修改也是没有效果的

但是打开游览器的开发者工具

 注意红框部分，可以看到switch开关两侧的字体是由特定的<span>包裹的

两侧字体的<span>元素共有的class为.el-switch_label

其中左侧标签即登入的class为.el-switch_label--left

且右侧标签即注册的class为.el-switch_label--right

而当switch处于未开启状态时（处于登入一侧时):登入的class后有一段.is--active的字段 ，而注册的class没有

而当switch处于开启状态时（处于注册一侧时):注册的class后有一段.is--active的字段 ，而登入的class没有（如下图）

 

得出如下结论： 

.el-switch_label：直接控制两侧的字体

.el-switch_label--left：控制左侧的字体

.el-switch_label--right：控制右侧的字体

在相应的字段后添加.is--active即激活状态（switch在哪一侧）

 示例

<style>
.switch .el-switch__label {
  color: white;
}

.switch .el-switch__label.is-active {
  color: #409EFF;
}
</style>

.switch 是<el-switch>的类选择器（如下图）

<el-switch>的类标签未激活状态时为.el-switch .switch;激活状态时为.el-switch .switch .is-checked

ps:别写在创建组件自带的<style scoped>中，而应新写一对不带scoped的<style>

scoped的作用是使其CSS样式仅作用于当前组件（即私有的），而当需修改第三方组件库时，组件中的scoped就会阻碍我们修改第三方组件库的样式

但是这样修改即修改了组件的默认颜色，导致项目的作用该组件的使用修改后的样式，应对组件添加相应的选择器，来实现修改特定的组件而避免上述情况的发生

Switch的事件

 官方提供了专门的事件change，例如

<el-switch v-show="showSwitch"
    v-model="value"
    active-text="注册"
    class="switch"
    inactive-text="登入"
    @change="trans($event)"
>

//<script>的method中
trans(state) {
      if(state){
        //登入组件的路由
        this.$router.push('/enter/register', () => {})
    }else if(!state){
        //注册组件的路由
        this.$router.push('/enter/login', () => {})
    }
},

关于专递的参数$event，可以简单理解为事件是否发生即switch是否开启