首页 > 其他分享 >vue elementui Switch组件添加开关样式

vue elementui Switch组件添加开关样式

时间:2022-11-18 09:55:22浏览次数:48  
标签:vue 12px elementui color Switch fff font display before

 

 

/deep/ .el-switch {       &::before {         content: '开';         display: none;         color: #fff;         z-index: 1;         margin-right: -12px;         transform: translateX(7px);         font-size: 12px;       }
      &::after {         color: #fff;         content: '关';         z-index: 1;         margin-left: -15px;         transform: translateX(-4px);         font-size: 12px;       }
      &.is-checked::before {         display: block;       }
      &.is-checked::after {         display: none;       }     }

标签:vue,12px,elementui,color,Switch,fff,font,display,before
From: https://www.cnblogs.com/zerofan/p/16902206.html

相关文章

  • vue组件通信6种方式总结(常问知识点)
    前言在Vue组件库开发过程中,Vue组件之间的通信一直是一个重要的话题,虽然官方推出的Vuex状态管理方案可以很好的解决组件之间的通信问题,但是在组件库内部使用Vuex往往会......
  • vue为什么v-for的优先级比v-if的高?
    前言有时候有些面试中经常会问到v-for与v-if谁的优先级高,这里就通过分析源码去解答一下这个问题。下面的内容是在当我们谈及v-model,我们在讨论什么?的基础上分析的,所以......
  • vue中兄弟组件方法互相调用 子组件调用子组件内的方法
    使用this.$refs方法,如果直接用无法调取到可以先打印出来看一下结构有时候需要加[0],如下:  两个子组件:<ads-banner-voteref="bannerVote"@openVote="openVote"/>/......
  • 记一场vue面试
    Vue修饰符有哪些事件修饰符.stop阻止事件继续传播.prevent阻止标签默认行为.capture使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行......
  • vue 路由传参
    1.路由传参两种方式params方式query方式 params方式需要占位   query方式不需要 ......
  • 在Vue中使用Canvas绘制动态背景
    好家伙, 发现了,在created(){}钩子函数中使用canvas画布貌似是错误的行为 vue中canvas的使用-掘金(juejin.cn) 于是我们琢磨一下 找到cancas元素;创建cont......
  • Vue-router 的简单应用
    一、基本路由。1、引入vue.js。<scripttype="text/javascript"src="../vue/vue.js"></script>2、引入核心的插件vue-router。<scripttype="text/javascript"s......
  • vue后台管理系统"批量删除"书写逻辑
    先上代码: 首先在整体el-table表格中添加@selection-change="SelectTableList"点击事件,这个主要的作用就是当表格被点击时,会调用这个函数;  然后再表格el-table......
  • 实验2:Open vSwitch虚拟交换机实践
    一、实验目的能够对OpenvSwitch进行基本操作;能够通过命令行终端使用OVS命令操作OpenvSwitch交换机,管理流表;能够通过Mininet的Python代码运行OVS命令,控制网络拓扑中的Open......
  • Nuxt 3.0 稳定版正式发布,基于 Vue 3 的 Web 框架
    Nuxt是使用简便的Web框架,用于构建现代和高性能的Web应用,可以部署在任何运行JavaScript的平台上。Nuxt3.0今天正式发布了稳定版,3.0基于Vue3,为TypeScript......