一、状态

1.待安装

2.安装中

3.安装完成

二、实现


<div className='button'>
       <div className='button_status'
	      onClick={() => clickButton(game)}
	       style={btnStyle()}
>
	<p>{buttonStatus}</p>
	</div>
  </div>

CSS:

.button > .button_status {
  width: 1.477rem;
  height: 0.72rem;
  border-radius: 0.39rem;
}
.button > .button_status > p {
  font-family: "MILanPro--GB1-4";
  font-size: 0.34rem;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  line-height: 0.72rem;
}
JS:

import { btnBg, hexToRgb } from './config';

const btnStyle = () =>{
		if (
			game.status === 'start' ||
			game.status === 'wait' ||
			game.status === 'pause' ||
			game.status === 'downloading' ||
			game.status === 'pending'
		) {
		  const bg = hexToRgb( btnBg, 0.4 )
		  console.log('bg', bg);
		  return {
			background: `linear-gradient(90deg, ${btnBg} 0%, ${btnBg} ${
				game.progress
			}%, ${bg} ${game.progress}%, ${bg} 100%)`,
		  };
		}
		if (game.status === 'success' || game.status === 'install_complete') {
		  return {
			background: '#F1A43B',
		  }
		}
		if (game.status === 'installing') {
		  return {
			background: hexToRgb('#000000', 0.1),
			color: '#FFFFFF'
		  }
		}
		return {
		  background: btnBg,
		};
	  }
config.js:

export const hexToRgb = (hex: string, alpha: any) => {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!result) return hex
  if (alpha) return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`
  return `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})`
}

export const btnBg = '#57B6C5';


您已经阅读00:00:00欢迎留言评论，喜欢的话就为作者点个赞或者赏颗糖吧！ 分享