发布于 2020-12-17 16:19
共1个回答
UJ
游客uJLTPs

需要编写一套CSS样式,包括:

  • .vue-switcher:基础样式类
  • .vue-switcher--unchecked:unchecked状态下的样式类
  • .vue-switcher-theme--diy:自定义主题diy的样式类
  • .vue-switcher-color--primary:自定义颜色primary的样式类

例如:

<switches v-model="enabled" type-bold="false" theme="custom" color="blue"></switches>

这里需要定义.vue-switcher-theme--custom.vue-switcher-color--blue的样式

.vue-switcher-theme--custom {
    &.vue-switcher-color--blue {
        div {
            background-color: lighten(blue, 10%);

            &:after {
                // for the circle on the switch
                background-color: darken(blue, 5%);
            }
        }

        &.vue-switcher--unchecked {
            div {
                background-color: lighten(blue, 30%);

                &:after {
                    background-color: lighten(blue, 10%);
                }
            }
        }
    }
}
回答问题
615 阅读
1 回答
0