-
ElementUI 的组件 Switch(开关)如何让文字显示在按钮上
2020-11-02 13:59:58定义组件所属类 tableScopeSwitch ,为后面样式指定做准备,设置开关的值和对应展示的文字(开为1,并展示启用;关为0,并展示禁用),v-model 与后端数据库数据进行绑定,指定改变触发事件handleStatusChange 函数...先展示页面效果图:
然后实现步骤:
1、引入相对应的组件:
定义组件的类为 tableScopeSwitch ,为后面样式设定做准备,设置开关的值和对应展示的文字(开为1,并展示启用;关为0,并展示禁用)。
v-model 与后端数据库数据进行绑定,按钮状态改变触发 handleStatusChange 函数(这个目前不影响)。
<el-switch class="tableScopeSwitch" :active-value="1" :inactive-value="0" @change="handleStatusChange(scope.$index, scope.row)" active-text="启用" inactive-text="禁用" v-model="scope.row.status"> </el-switch>
2、设定CSS样式来实现文字显示在按钮上:
<style> .tableScopeSwitch .el-switch__label { position: absolute; display: none; color: #fff; } /*打开时文字位置设置*/ .tableScopeSwitch .el-switch__label--right { z-index: 1; right: 6px; /*不同场景下可能不同,自行调整*/ } /*关闭时文字位置设置*/ .tableScopeSwitch .el-switch__label--left { z-index: 1; left: 6px; /*不同场景下可能不同,自行调整*/ } /*显示文字*/ .tableScopeSwitch .el-switch__label.is-active { display: block; } .tableScopeSwitch.el-switch .el-switch__core, .el-switch .el-switch__label { width: 75px !important; /*开关按钮的宽度大小*/ } </style>
注:其实这些样式可以通过 谷歌浏览器的F12键 进行调试,我也是通过这样的样式调整后,直接 copy 到对应文件下的 style 标签里(单个 vue 文件下的 style 标签记得去掉 scoped 属性)。
最后这样就可以达到效果了。
-
ElementUI中switch开关的使用--关于如何把文字显示在按钮上
2020-07-01 17:07:51先上图: 拿走说一声:拒绝伸手党!!!!! 先定义class: <el-switch class="tablescope" @change="handleStatusChange(scope.$index, scope.row)" :active-value="1" :inactive-value="0" v-model=...先上图:
拿走说一声:拒绝伸手党!!!!!先定义class:
<el-switch class="tablescope" @change="handleStatusChange(scope.$index, scope.row)" :active-value="1" :inactive-value="0" v-model="scope.row.status" inactive-text="否" active-text="是" ></el-switch>
然后重点: style上不要加 scoped 了
上样式:<style lang="scss"> .tablescope{ .el-switch__label--left { position: relative; left: 45px; color: #fff; z-index: -1111; } .el-switch__core{ width: 50px !important; } .el-switch__label--right { position: relative; right: 46px; color: #fff; z-index: -1111; } .el-switch__label--right.is-active { z-index: 1111; color: #fff !important; } .el-switch__label--left.is-active { z-index: 1111; color: #9c9c9c !important; } } </style>
有什么问题欢迎指正!!!大佬勿喷。。。
-
ElementUI中switch开关的使用--关于如何将文字显示在按钮上的实现
2020-04-28 16:04:12这里写自定义目录标题有关于element中switch的用法实现的效果图...(1)添加html代码的显示,此处写了class="switch"类名,是为了避免造成全局样式的污染。 <el-table-column label="上下架" align="center"> ...这里写自定义目录标题
有关于element中switch的用法
实现的效果图
具体实现步骤:
(1)添加html代码的显示,此处写了class="switch"类名,是为了避免造成全局样式的污染。
<el-table-column label="上下架" align="center"> <template slot-scope="scope"> <el-switch class="switch" v-model="scope.row.status" :active-value="0" :inactive-value="1" active-text="上架" inactive-text="下架" > </el-switch> </template> </el-table-column>
(2)修改el-switch的默认样式
我的样式是写在全局样式文件main.css中的,如果是想在el-switch所在文件中去修改样式的话,一定要注意style中不能有scoped属性,否则写的样式可能会不生效。但是如果去掉scoped的话,样式也会作用于全局,有可能会造成全局污染,所以建议在样式外面加一个全局类名。
小知识点:在使用vue框架的时候,给style标签添加scoped属性,表示该style标签所包含的样式仅仅作用于当前的vue组件,不会产生样式全局污染的情况,一个应用中所有vue组件都加上该属性,则实现了样式的模块化/* switch按钮样式 */ .switch .el-switch__label { position: absolute; display: none; color: #fff !important; } /*打开时文字位置设置*/ .switch .el-switch__label--right { z-index: 1; } /* 调整打开时文字的显示位子 */ .switch .el-switch__label--right span{ margin-right: 9px; } /*关闭时文字位置设置*/ .switch .el-switch__label--left { z-index: 1; } /* 调整关闭时文字的显示位子 */ .switch .el-switch__label--left span{ margin-left: 9px; } /*显示文字*/ .switch .el-switch__label.is-active { display: block; } /* 调整按钮的宽度 */ .switch.el-switch .el-switch__core, .el-switch .el-switch__label { width: 70px !important; margin: 0; }
-
android 中button上如何显示图片和文字
2014-01-15 21:27:51最近遇到一个问题,要在Button按钮上添加文字和图片,一下就想到了drawableLeft,drawableTop,drawableRight,drawableBotton,可是这样做怎么调文字和图片的位置呢? 下面这种方法可以实现: android:id="@+...最近遇到一个问题,要在Button按钮上添加文字和图片,一下就想到了drawableLeft,drawableTop,drawableRight,drawableBotton,可是这样做怎么调文字和图片的位置呢?
下面这种方法可以实现:
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="20dip"
android:drawablePadding="5dip"
android:layout_alignParentLeft="true"
android:drawableLeft="@drawable/side_icon_5"
android:drawableRight="@drawable/side_icon_arrow"
android:text="设置"
android:textSize="15dip"
android:layout_marginTop="10dip"
android:gravity="left|center_vertical"
android:textColor="#ff7800"
/>其中android:gravity="left|center_vertical"表示文字与左边图片对其,android:drawablePadding="5dip"表示文字与左图对其的基础上右移动5dip,如无这两个属性文字默认居中显示。如左边图片须向中间移动只需要android:paddingLeft=""的值,右边图片向中间移动则设置android:paddingRight=“”则可。
-
C++按钮创建鼠标右键菜单后,选择右键菜单项后如何将选中的文字更新为按钮的文字?
2016-09-18 23:41:382.选中右键菜单文字,让其显示在复选按钮上,就是我的问题 将按钮上的“Check2”通过右键菜单显示为“文字1”  谢谢! -
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2014-07-02 13:32:19<title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id="box"> 民间机构提前3天预报大理地震 地震局称违法</h2> <p>17日大理州5.0级地震发生之后,在微博上一条曾在3天前就... -
按钮右对齐_如何让anki中的文字改变对齐方式
2021-01-15 06:23:09首先,anki默认的对齐方式是居中对齐,也就是你在没有任何设置之前,你所打上的文字都是以居中对齐显示的对齐方式有很多种,一般最常用到的就是居中对齐、左对齐、右对齐。对齐方式没有优劣之分,只有合适不合适,... -
如何用数据驱动实现通用化巡检APP(如何一个界面里添加多个点击拍照按钮并显示在不同的imageview里)
2018-01-18 19:36:49最近启动了一个新项目叫通用化,老师的设想是这样的:APP里显示的内容和布局都是不确定的,需要从后台传过来的json串中解析出来,然后经过一系列的循环和判断语句,为APP添加上json中要求的布局和内容,就连文字的... -
vbs自定义按钮文字_如何使用Divi的主题生成器创建自定义全局页眉
2020-12-06 22:59:05除非你为该页面或文章分配了不同的页眉,否则全局页眉将显示在你网站上的所有位置。现在就开始吧!预览在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的显示结果。桌面移动端1. 设置你的主菜单首先在... -
怎么让上下两排对齐_word如何解决上下两行文字对不齐
2021-02-05 15:12:41Word 格式上出现上下对不齐的问题,一般都和文字、字符的设置有关,小编在这里列举了4种解决方法供参考:方法一:点击文件-页面设置-板式-(页面-垂直对齐方式)-选择两边对齐。方法二:如果上下两行均是标点符号、... -
如何加载图片按钮
2011-10-13 16:37:44功能:给按钮加载图片,并且在“可用”、“不可用”、“鼠标经过”、“鼠标按下”时显示不同的图片,而且在鼠标点在按钮上时出现文字提示并且变为手型 过程: 1、加载CBmpButton类(此类为重写的类,可在... -
自定义边框_在Word里面如何给文字应用字符边框
2021-01-15 00:19:27使用字符边框,可以将文字进行突出显示,是一种很好的标记功能。下面就来介绍一下如何使用这个功能。1.选中目标文字,如果不是连续的,可以按住Ctrl键进行多选。2.然后点击“字符边框”命令,这样文字上就会出现边框... -
基于MFC如何修改按钮,窗体背景色
2015-10-22 11:09:561.如果想在按钮上添加BMP图片,要设置按钮的属性为bitmap类型,这样按钮上就不能显示文字了,然后使用下面的代码,VC就是陷阱多 HBITMAP hb=LoadBitmap(AfxGetInstanceHandle(),MAKEINTRESOURCE(IDB_BITMAP1));... -
PS如何把文字的上下间距/行距如调大调小?
2020-03-18 10:51:131.自动生成一个文字图层;...4.鼠标点下拉按钮,弹出数字列表,在这些数值中选择一个数值,这数值就是行间距的数值。 5.比如,选择:30看,画布中的两行字的行间距立即变小了。 6.反之,想... -
场景中添加文字_如何修改单元格中的文字方向
2021-01-09 17:50:33单元格中的文字默认就是水平出现的,并没有什么特别之处。一般来说,要设置特殊字体,都会去使用艺术字来进行表现。...选中这个单元格,点击工具栏上的“方向”按钮,展开下拉菜单,在里面选中一个文... -
【Unity3D】Unity3D 鼠标移动到UGUI上面显示文字
2019-01-28 14:35:11那么如何在UGUI上,鼠标移动上去显示文字说明呢。 大家都知道,当鼠标移动到button按钮上面的时候会出现变化,主要是button这个组件在控制 既然可以控制颜色,就一定有状态捕捉的枚举 然后就找到了这个 接下来就是... -
请问如何点击按钮就可以弹出图片?
2019-05-07 15:16:04/* 思路,先添加一块区域,可以用来显示图片,再在此基础上添加响应事件 其实就是Label*/ frame.setBounds(600,260,1000,1000); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); ... -
【转载】VC编程中如何在视图区显示工具提示
2005-01-18 23:57:002001-11-30· ·刘 涛··yesky 工具提示控制是一个小窗口,在其中显示单行文字用以描述应用程序中的工具的用途。这里的工具所指的既可以是窗口(如工具栏上的按钮),也可以是一个固定的区域。大家都知道利用... -
修改选中_PS小白:如何修改图片中的文字
2021-01-12 14:39:47alt+鼠标滚动,放大图片,显示需要调整的区域3 保存源文件 文件--存储为---psd格式,放在桌面4 新建图层 单击界面右下角倒数第二个按钮 5 选中新图层 后续的操作都需要在选中新图层的基础上操作,否则无法生效6 选中... -
【聊技术】在Android中实现自适应文本大小显示
2020-12-08 10:23:05本周的聊技术话题和大家说说如何在Android中实现自适应文本大小显示。 想象一下,在布局中,通常显示文本的区域大小是固定的,但是文本长度并不总是固定的。比如列表中的文章标题、界面下方的按钮文本等等。 为了尽... -
JS 修改移动端 系统内置输入法 功能与文字显示
2019-10-22 11:18:28页面上有三个input 输入框, 如果用户焦点在第一个input 手机输入法的右下角按钮显示为下一步,点击后切换到第二个input,焦点锁定在第三个也就是最后一个input的时候显示;"> 完成 。 产品发给我的... -
plsql存储过程修改后怎么保存_PS小白:如何修改图片中的文字
2020-12-05 07:29:51alt+鼠标滚动,放大图片,显示需要调整的区域3 保存源文件 文件--存储为---psd格式,放在桌面4 新建图层 单击界面右下角倒数第二个按钮 5 选中新图层 后续的操作都需要在选中新图层的基础上操作,否则无法生效6 选中... -
手机如何添加域名白名单_手机图片如何添加时间、地点?按一下这个按钮,就能一键添加...
2021-01-13 18:31:47方法一手机自带(安卓手机)一般手机里面都有一个功能叫做"水印"功能,一般打开相机都是隐藏在"右上角一栏",打开之后打开"水印"功能,就能发现下方有显示的时间、地点、天气、心情、美食、运动等等栏目。可以手动进行... -
Visual Basic 2005 - 如何替卷标与按钮控件加上省略符号
2007-01-08 18:29:00当画面上的空间有限时,我们可能无法将控件中的文字完整显示出来,当遭逢此种状况时,我们通常会在控件中显示出省略符号「…」来表示尚有文字未显示出来。为了协助您制作出此类的效果,.NET Framework 2.0特别替... -
【N01】如何一张一张显示从数据库中查询到的图片
2019-03-31 20:22:19首先我在DIV布局上,先设置了一个大的DIV,ID是MAIN,然后将从后端查询来的代码使用FOR循环,在MAIN中添加一串HTML语言,循环一次就根据审核状态判断应该生成什么样的HTML语言,增加一个DIV框,里面有一张图片和两段...
-
Windows系统管理
-
size
-
004:神秘的数组初始化
-
云开发后台+微信扫码点餐小程序+cms网页管理后台 含后厨端和用户端
-
计算两个 420YUV 的 Y-PSNR、U-PSNR、V-PSNR 和 YUV-PSNR
-
2.5.3 实操03_服务调用
-
基于微信的同城小程序、校园二手交易小程序 毕业设计毕设源码使用教程
-
计算机网络 静态路由和动态路由协议
-
生态脆弱性的评价因子
-
MySQL 管理利器 mysql-utilities
-
rereschrome.zip
-
零基础极简以太坊智能合约开发环境搭建并开发部署
-
java打扑克
-
百度ai文字识别.exe
-
1.4: 归档及压缩 、 重定向与管道操作 、 find精确查找 、 vim高级使用(1).docx
-
php软件开发--redis操作
-
基于STM32的步进电机控制系统.pdf
-
牛气冲天V1.0.0.zip
-
基于SSM实现的房屋租赁系统【附源码】(毕设)
-
线程的五种状态