精华内容
下载资源
问答
  • 定义组件所属类 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 属性)

    最后这样就可以达到效果了。

    展开全文
  • 图: 拿走说一声:拒绝伸手党!!!!! 先定义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>
    

    有什么问题欢迎指正!!!大佬勿喷。。。

    展开全文
  • 这里写自定义目录标题有关于element中switch的用法实现的效果图...(1)添加html代码的显示,此处写了class="switch"类名,是为了避免造成全局样式的污染。 <el-table-column label="上下架" align="center"> ...

    有关于element中switch的用法

    el-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=“”则可。

    展开全文
  • 2.选中右键菜单文字,让其显示在复选按钮上,就是我的问题 将按钮上的“Check2”通过右键菜单显示为“文字1” ![图片说明](https://img-ask.csdn.net/upload/201609/19/1474241934_419476.png) 谢谢!
  • <title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id="box"> 民间机构提前3天预报大理地震 地震局称违法</h2> <p>17日大理州5.0级地震发生之后,微博一条曾3天前就...
  • 首先,anki默认的对齐方式是居中对齐,也就是你没有任何设置之前,你所打文字都是以居中对齐显示的对齐方式有很多种,一般最常用到的就是居中对齐、左对齐、右对齐。对齐方式没有优劣之分,只有合适不合适,...
  • 最近启动了一个新项目叫通用化,老师的设想是这样的:APP里显示的内容和布局都是不确定的,需要从后台传过来的json串中解析出来,然后经过一系列的循环和判断语句,为APP添加json中要求的布局和内容,就连文字的...
  • 除非你为该页面或文章分配了不同的页眉,否则全局页眉将显示在你网站的所有位置。现在就开始吧!预览深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的显示结果。桌面移动端1. 设置你的主菜单首先...
  • Word 格式出现上下对不齐的问题,一般都和文字、字符的设置有关,小编这里列举了4种解决方法供参考:方法一:点击文件-页面设置-板式-(页面-垂直对齐方式)-选择两边对齐。方法二:如果上下两行均是标点符号、...
  • 如何加载图片按钮

    2011-10-13 16:37:44
    功能:给按钮加载图片,并且在“可用”、“不可用”、“鼠标经过”、“鼠标按下”时显示不同的图片,而且在鼠标点在按钮上时出现文字提示并且变为手型   过程: 1、加载CBmpButton类(此类为重写的类,可在...
  • 使用字符边框,可以将文字进行突出显示,是一种很好的标记功能。下面就来介绍一下如何使用这个功能。1.选中目标文字,如果不是连续的,可以按住Ctrl键进行多选。2.然后点击“字符边框”命令,这样文字上就会出现边框...
  • 基于MFC如何修改按钮,窗体背景色

    千次阅读 2015-10-22 11:09:56
    1.如果想在按钮上添加BMP图片,要设置按钮的属性为bitmap类型,这样按钮上就不能显示文字了,然后使用下面的代码,VC就是陷阱多  HBITMAP hb=LoadBitmap(AfxGetInstanceHandle(),MAKEINTRESOURCE(IDB_BITMAP1));...
  • 1.自动生成一个文字图层;...4.鼠标点下拉按钮,弹出数字列表,这些数值中选择一个数值,这数值就是行间距的数值。 5.比如,选择:30看,画布中的两行字的行间距立即变小了。 6.反之,想...
  • 单元格中的文字默认就是水平出现的,并没有什么特别之处。一般来说,要设置特殊字体,都会去使用艺术字来进行表现。...选中这个单元格,点击工具栏的“方向”按钮,展开下拉菜单,里面选中一个文...
  • 那么如何在UGUI,鼠标移动上去显示文字说明呢。 大家都知道,当鼠标移动到button按钮上面的时候会出现变化,主要是button这个组件在控制 既然可以控制颜色,就一定有状态捕捉的枚举 然后就找到了这个 接下来就是...
  • /* 思路,先添加一块区域,可以用来显示图片,再此基础添加响应事件 其实就是Label*/ frame.setBounds(600,260,1000,1000); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); ...
  • 2001-11-30· ·刘 涛··yesky 工具提示控制是一个小窗口,其中显示单行文字用以描述应用程序中的工具的用途。这里的工具所指的既可以是窗口(如工具栏按钮),也可以是一个固定的区域。大家都知道利用...
  • alt+鼠标滚动,放大图片,显示需要调整的区域3 保存源文件 文件--存储为---psd格式,放在桌面4 新建图层 单击界面右下角倒数第二个按钮 5 选中新图层 后续的操作都需要选中新图层的基础操作,否则无法生效6 选中...
  • 本周的聊技术话题和大家说说如何在Android中实现自适应文本大小显示。 想象一下,在布局中,通常显示文本的区域大小是固定的,但是文本长度并不总是固定的。比如列表中的文章标题、界面下方的按钮文本等等。 为了尽...
  • 页面有三个input 输入框, 如果用户焦点第一个input 手机输入法的右下角按钮显示为下一步,点击后切换到第二个input,焦点锁定第三个也就是最后一个input的时候显示;"> 完成 。 产品发给我的...
  • alt+鼠标滚动,放大图片,显示需要调整的区域3 保存源文件 文件--存储为---psd格式,放在桌面4 新建图层 单击界面右下角倒数第二个按钮 5 选中新图层 后续的操作都需要选中新图层的基础操作,否则无法生效6 选中...
  • 方法一手机自带(安卓手机)一般手机里面都有一个功能叫做"水印"功能,一般打开相机都是隐藏"右角一栏",打开之后打开"水印"功能,就能发现下方有显示的时间、地点、天气、心情、美食、运动等等栏目。可以手动进行...
  • 当画面的空间有限时,我们可能无法将控件中的文字完整显示出来,当遭逢此种状况时,我们通常会控件中显示出省略符号「…」来表示尚有文字显示出来。为了协助您制作出此类的效果,.NET Framework 2.0特别替...
  • 首先我DIV布局,先设置了一个大的DIV,ID是MAIN,然后将从后端查询来的代码使用FOR循环,MAIN中添加一串HTML语言,循环一次就根据审核状态判断应该生成什么样的HTML语言,增加一个DIV框,里面有一张图片和两段...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 269
精华内容 107
关键字:

如何在按钮上显示文字