首页 > 其他分享 >vue2 switch 将文字显示在按钮内部

vue2 switch 将文字显示在按钮内部

时间:2023-11-09 16:44:07浏览次数:37  
标签:__ el index color label switch vue2 按钮

el-element plus已经实现了该功能了,其实主要就是改样式。

效果图

image

样式修改

<el-switch
  v-model="value"
  active-color="#13ce66"
  active-text="在读"
  inactive-text="毕业"
  inactive-color="#ff4949">
</el-switch>
.el-switch__core{
width: 65px !important;
}

.el-switch__label--left {
position: absolute;
left: 24px;
color: #fff;
z-index: -1111;
cursor: default;
user-select: none;
}

.el-switch__label--right {
position: absolute;
right: 24px;
color: #fff;
z-index: -1111;
cursor: default;
user-select: none;
}

.el-switch__label--right.is-active {
z-index: 1111;
color: #fff!important;
}

.el-switch__label--left.is-active {
z-index: 1111;
color: #9c9c9c!important;
}

element plus已经支持

image

标签:__,el,index,color,label,switch,vue2,按钮
From: https://www.cnblogs.com/lstory/p/17822186.html

相关文章

  • vue2,vue3的优缺点
    vue2:优点:vue2比较成熟,所以具有比较完善的第三方的插件和库的支持,和技术资源的支持和解决方案d的社区等缺点:对ts语法的支持有限vue2中difff算法遍历dom树的关系,优化程度较低vue3:优点:引入一些高级的api优化了diff算法,使得性能更好,包更小对ts的语法支持更好......
  • vue2项目使用vueAMap
    npminstallvue-amap-D在main.jsimportVueAMapfrom"vue-amap";Vue.use(VueAMap);VueAMap.initAMapApiLoader({key:"高德地图的key",//这里写你申请的高德地图的keyplugin:["AMap.Autocomplete","AMap.Geocoder","AMap.Geol......
  • 大屏展示技术栈:vue2+echarts+dataV
    1.大屏搭建使用的是dataV组件http://datav.jiaminghi.com/guide,使用dataV组件有如下注意点:a.修改配置项config中data的值,需要重新赋值configb.修改dataV某些内置样式,他有个固定的类2.登录界面动态背景,使用的是vanta.jsVanta.js-Animated3DBackgroundsForYourWebsite......
  • vue2实现动态侧边导航栏
    router文件下index.js 来源http://blog.itpub.net/69978258/viewspace-2909200///index.tsimportVuefrom'vue';importVueRouterfrom'vue-router';importLoginfrom'@/views/login/index.vue';importLayoutfrom'@/layout/ind......
  • COGI控制删除按钮增强
    1、业务需求COGI在SAP中主要用于解决生产订单异常的问题。通常发生在生产订单执行过程中,当出现了特定的异常情况时,需要进行处理。这些异常情况可能包括物料缺失、数量不匹配、质量问题等等。当这些异常情况发生时,系统会生成异常记录并将其显示在COGI中。在COGI中,用户可以查看异......
  • vue2+antd 使用select 通过v-model 无法回显也不能修改?
    <template><a-tablesize="middle":data-source="dataList":pagination="false":locale="{emptyText:'暂无数据'}":scroll="{x:'max-content'}"><a-table-columntitle=......
  • vue2获取cookie/删除cookie/设置cookie
    起因,访问不同路由跳到首页/需登录账号demo<template><div><button@click="setCookie">设置Cookie</button><button@click="getCookie">获取Cookie</button><button@click="deleteCookie">删除Cook......
  • 前端歌谣的刷题之路-第七十三题- 点击按钮隐藏按钮
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目......
  • 解锁表单新操作!JVS低代码表单自定义按钮功能全解析
    在普通的表单设计中,虽然自带的【提交】、【重置】、【取消】按钮可以满足基本操作需求,但在面对更多复杂的业务场景时,这些按钮的显示控制就显得有些力不从心。为了更好地满足用户在表单操作过程中的个性化需求,JVS低代码推出了表单自定义按钮功能。这项功能不仅可以更灵活地操作表单......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-25-处理单选和多选按钮-中篇
    1.简介上一篇中宏哥讲解和介绍的单选框有点多,而且由于时间的关系,宏哥决定今天讲解和分享复选框的相关知识。2.什么是单选框、复选框?单选按钮一般叫raidobutton,就像我们在电子版的单选答题过程一样,单选只能点击一次,如果点击其他的单选,之前单选被选中状态就会变成未选中。单......