使用QMdiArea做为多窗口页面，把页面的关闭按钮设置为显示，奈何每个打开的QTabBar都有关闭按钮，并且其自带的关闭按钮图标太难看了，试了很多方法，想实现跟VS的标签按钮类似，当前页面有关闭按钮图标，其他打开的页面没有关闭按钮图标，当移动到关闭按钮图标时，高亮该图标……都没有成功。

今天偶然灵感出现，其实很简单，直接使用QSS就可以完成！



QTabBar::close-button {

    image:null

}

QTabBar::close-button:selected {

    image: url(close.png)

}

 

QTabBar::close-button:selected:hover {

    image: url(close_hover.png)

}

目录

按钮CButton，代码创建，设置按钮图标，改变按钮颜色，实时改变按钮外观

2.1 MFC控件之各种按钮CButton

2.2 MFC控件之纯代码创建CButton

2.3 MFC控件之带图标的按钮

2.4 MFC控件之美化按钮-改变按钮颜色

2.5 MFC控件之美化按钮高级篇-实时改变按钮外观

目录

 

按钮CButton，代码创建，设置按钮图标，改变按钮颜色，实时改变按钮外观

2.1 MFC控件之各种按钮CButton

2.2 MFC控件之纯代码创建CButton

2.3 MFC控件之带图标的按钮

 

按钮CButton，代码创建，设置按钮图标，改变按钮颜色，实时改变按钮外观

2.1 MFC控件之各种按钮CButton

















2.2 MFC控件之纯代码创建CButton





 

 

 

 

022Dlg.h



022Dlg.cpp



2.3 MFC控件之带图标的按钮



.h



.cpp



资源图片的格式必须为bmp



 



 





第一种创建带图标的按钮方法：比较麻烦



.cpp



第二种创建带图标的按钮方法：比较简单





 

   .h



.cpp



2.4 MFC控件之美化按钮-改变按钮颜色





















 













2.5 MFC控件之美化按钮高级篇-实时改变按钮外观















首先通过类向导添加虚函数











在.h自动生成



.cpp







026Dlg.h





026Dlg.cpp





通过类向导添加与鼠标相关的消息，使按键在鼠标移到按键位置上时有响应变化





MyBtn.cpp



初始化颜色对象为红色



 

修改

的按钮颜色函数为



MyBtn.h



MyBtn.cpp

关闭按钮图标

vant+vue（自定义单选、复选按钮图标以及扩大单选按钮范围）
主要记录vant和vue使用过程中遇见的问题以及解决方案

文章目录
vant+vue（自定义单选、复选按钮图标以及扩大单选按钮范围）
前言
一、单选按钮图标自定义？
二、第一步
1.html部分
2.data引入自定义图标
3.扩大单选按钮可点击范围
总结



前言
有些时候我们想自己定义单选按钮图标，以及扩大单选按钮的范围，例如在制作九宫格的时候，那么下面我们来讲讲怎样自定义按钮图标，本文章基于vant和vue来写

一、单选按钮图标自定义？
单选和复选类似，我这里以单选为例子，最后再说复选怎么做。
二、第一步
我想大家都知道，单选和复选其实是有图标的，我们在此处只需要用插槽将其替换就可以了，话不多说，直接上代码：
1.html部分
代码如下（示例）：
 <!-- 九宫格、一行三格、无边框、正方形 -->
      <van-grid gutter="0.11rem"
                column-num="3"
                :border="false"
                square>
        <!-- for循环 -->
        <van-grid-item use-slot
                       text="文字"
                       v-for="(i,index) in cardList"
                       :key="index">
          <!-- 引入单选组件，选择结果为radio -->
          <van-radio-group v-model="radio"
                           class="cardBorder">
            <div class="select">
              <!-- 选择结果为i.code -->
              <van-radio :name="i.code"
                         id="radio">
                <!-- 用template插槽自定义图标 -->
                <template #icon="props">
                  <!-- checked是单选按钮自带属性，值为true和false -->
                  <!-- activeIcon:选择图标、inactiveIcon:未选择图标 -->
                  <img class="img_icon"
                       :src="props.checked ? activeIcon : inactiveIcon" />
                </template>
              </van-radio>
            </div>
            <div class="content_div">
              <img style="width: 2.1rem;"
                   :src="i.src" />
              <span class="fontBackground font_13 te_center color_fff ">{{i.name}}</span>
            </div>
          </van-radio-group>
        </van-grid-item>
      </van-grid>

2.data引入自定义图标
这里我的未选图标是透明色的，图片png格式：

代码如下（示例）：
    return {
 		radio: '',
      // 引入图标
      activeIcon: require('@/assets/img/setting/birthdaAndCard/selected.png'),
      inactiveIcon: require('@/assets/img/setting/birthdaAndCard/unSelected.png'),  }
}

3.扩大单选按钮可点击范围
这里运用伪类before来扩大范围，伪类的好处是不改变原有样式，正符合我们这里的要求，主要就是用padding扩大范围，一下是css，我这里在html中定义了id:radio,以便找到该单选按钮：

代码如下（示例）：
        #radio::before {
  width: 0.44rem;
  height: 0.36rem;
  content: '';
    /* 下图红色区域就是我扩大的范围 */
  background: orangered;
  /* 加宽高使得和图片一样大小 */
  padding: 43px;
  position: absolute;
  top: 0px;
  right: 0px;
}


红色区域就是扩大的范围：


最后的结果就是这样了：


再来说复选框，复选框要改变样式，只需要将对应得单选van-radio-group标签van-checkbox-group标签，van-radio标签变成van-checkbox就可以了。

总结

1、vant宫格得用法
2、单选、复选按钮自定义图标
3、扩大单选按钮可点击范围——伪类得运用