一个列表中按钮的不同样式

水深无声 2022-09-15 12:42 197阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5LyY5pmo_size_20_color_FFFFFF_t_70_g_se_x_16][]

如上图所示，假设这是一个传统的秒杀购买场景：

## （1）问题概述： ##

**        状态：** （1）进入秒杀  （2）进入秒杀  （3）立即预约  （4）宝贝秒光  （5）活动结束

**        文字：**   进入 秒杀文字颜色\#fff，其他文字颜色都是 \#ff3B56；  
              宝贝秒光，活动结束，文字带透明度30%；

**        描边：**   只有立即预约有描边，其他状态都没有

**       按钮透明度：**立即预约 8%  进入秒杀  100%  宝贝秒光  8% 活动结束   8%

## （2）解决方案： ##

拿到这个问题，首先很多人想想到的是通过，if else判断展示逻辑，但是 实际使用这种方式，情况会变得很复杂，而且难以维护；

### 方式一：逻辑判断 ###

{/* 立即预约、宝贝秒光，活动结束 */}
     {
      +v.status === 3 || +v.status === 4 || +v.status === 5 ? 
      <View
      className='benifit-wrapper'
      onClick={() => {
        goYuYUe(v);
      }}
      style={
       { background: titleColor, opacity: '0.06'}}
    >
        {
          +v.status === 3 ? <Text style={
       { color: titleColor, border: '3px solid #ccc', borderColor: titleColor }} className="benifit" lines={1}>
          {getBtnText(v.status)}
      </Text> : <Text style={
       { color: titleColor}} className="benifit" lines={1}>
          {getBtnText(v.status)}
        </Text>
        }
    </View> : <View
      className='benifit-wrapper'
      onClick={() => {
        goYuYUe(v);
      }}
      style={
       { background: titleColor}}
    >
        <Text style={
       { color: '#fff' }} className="benifit" lines={1}>
          {getBtnText(v.status)}
        </Text>
    </View>
    }

这里只是html的判断逻辑其实还要加上CSS的处理，相当的麻烦，这里不再概述；

### 方式二：CSS和html抽离，进行CSS注入 ###

const BTN_STATUS = [
      { id: 1, des: '进入秒杀' },
      { id: 2, des: '进入秒杀' },
      { id: 3, des: '立即预约' },
      { id: 4, des: '宝贝已秒光' },
      { id: 5, des: '秒杀已结束' },
    ];
    
    const getBtnText = (text) => {
        const filterText = BTN_STATUS.filter((v) => {
          if (+v.id === +text) {
            return v.des;
          }
        });
        return filterText[0].des;
    };
    
    //16进制转RGB
    
    const colorToRGB = (color, opt) => {
        let color1, color2, color3;
        color = '' + color;
        if (typeof color !== 'string') return;
        if (color.charAt(0) == '#') {
          color = color.substring(1);
        }
        if (color.length == 3) {
          color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
        }
        if (/^[0-9a-fA-F]{6}$/.test(color)) {
          color1 = parseInt(color.substr(0, 2), 16);
          color2 = parseInt(color.substr(2, 2), 16);
          color3 = parseInt(color.substr(4, 2), 16);
          return 'rgb(' + color1 + ',' + color2 + ',' + color3 + ',' + opt + ')';
        }
      };
    
    // realList就是实际列表的数据
    
    {realList.map((v, index) => {
                switch (+v?.status) {
                  case 1:
                    btnStyle = {
                      backgroundColor: titleColor,
                      color: '#fff',
                      border: 0,
                      opacity: 1
                    };
                    break;
                  case 2:
                    btnStyle = {
                      backgroundColor: titleColor,
                      color: '#fff',
                      border: 0,
                      opacity: 1
                    };
                    break;
                  case 3:
                    btnStyle = {
                      backgroundColor: colorToRGB(titleColor, 0.06),
                      color: titleColor,
                      border: `1px solid ${titleColor}`,
                      opacity: 1
                    };
                    break;
                  case 4:
                    btnStyle = {
                      backgroundColor: colorToRGB(titleColor, 0.06),
                      color: titleColor,
                      border: 0,
                      opacity: 0.3
                    };
                    break;
                  case 5:
                    btnStyle = {
                      backgroundColor: colorToRGB(titleColor, 0.06),
                      color: titleColor,
                      border: 0,
                      opacity: 0.3
                    };
                    break;
                  default:
                    break;
                }
                return v?.status ? (
                  <li>
                     <View
                       className="benifit-wrapper"
                              style={
       {
                                border: btnStyle.border,
                                background: btnStyle.backgroundColor,
                                color: btnStyle.color,
                              }}
                            >
                              <Text className="benifit" lines={1} style ={
       { opacity: `${btnStyle.opacity}`}}>
                                {getBtnText(v.status)}
                              </Text>
                  </li>)
     }
    )}

如上述代码，我们将css和 html进行解耦，然后 通过不同的状态对应的css通过btnStyle，注入到html中；

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5LyY5pmo_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d93ed9f501a94f4da6b71b9acb67b6db.png

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 css样式在列表最后一个没有样式效果

.address-msg:last-child { border-bottom: none; } ![watermark_type_ZmFuZ3p

亦凉/ 2023年07月20日 12:20/ 0 赞/ 12 阅读

相关 html做一个好看的按钮下拉列表

html做一个好看的按钮下拉列表 -------------------- ![在这里插入图片描述][20210322222357242.gif] ---------

àì夳堔傛蜴生んèń/ 2022年11月12日 04:27/ 0 赞/ 164 阅读

相关一个列表中按钮的不同样式

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5LyY5pmo_size_20_col

水深无声/ 2022年09月15日 12:42/ 0 赞/ 198 阅读

相关 Vue实现一个按钮切换显示不同的div内容

<template> <button type="primary" @click="click" icon="retweet" style="margin-le

分手后的思念是犯贱/ 2022年09月01日 09:10/ 0 赞/ 219 阅读

相关 HTML同一个table中不同的按钮提交不同表单

> 在同一个页面的table中提交用不同的按钮提交不同的表单通常需要多个form，如果为了排版需要对齐不同的button，可以用table的tbody标签实现将tbo

左手的ㄟ右手/ 2022年07月15日 07:56/ 0 赞/ 252 阅读

相关【easyui】datagrid中增加按钮样式

1 首先，在datagrid的数据列format一个动态的btn var btn = '<a class="throwcls" onclick="goToRespon

以你之姓@/ 2022年07月13日 00:43/ 0 赞/ 277 阅读

相关 Android ListView中不同样式的布局

在平时android开发当中，我们经常会碰到这样一个需求，在一段listView中差一段不一样的布局，那么这种listView我们应该怎么做呢 ![这里写图片描述][70

野性酷女/ 2022年05月23日 05:48/ 0 赞/ 167 阅读

相关 CSS按钮样式

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <t

朴灿烈づ我的快乐病毒、/ 2022年02月05日 12:59/ 0 赞/ 386 阅读

相关 poi设置一个单元格中文字不同的样式

XSSFCell cell = ExcelCellUtil.getCell(sheet,cellStr); String title = cell.ge

妖狐艹你老母/ 2022年01月31日 14:09/ 0 赞/ 625 阅读

相关 jstl 实现同一个table中行间样式不同【tr】

![2019081218242612.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

谁践踏了优雅/ 2021年10月18日 15:46/ 0 赞/ 245 阅读