CSS实现优惠券透明圆形镂空打孔效果等能力学习

前言：无他，仅供学习记录，通过一个简单的优惠券Demo参考实践。

本次案例主要学习或巩固一下几点：

1. 实现一个简单的Modal；
2. 如何进行复制文本到粘贴板；
3. 在不使用UI的svg图片的情况下，如何用CSS实现类优惠券打孔的样式；
4. createPortal的使用实践；

优惠券例子

代码

index.tsx

import { Button } from 'antd-mobile';
import { createPortal } from 'react-dom';
import { useCallback, useState } from 'react';
import { copyText } from '@/utils';
import styles from './index.module.less';

interface CouponProps {
  couponData?: {
    couponName: string;
    couponCode: string;
    expirationDate: string;
    threshold: string;
  };
}

const Coupon = (props: CouponProps) => {
  const {
    couponName = '优惠券名称',
    couponCode = '1234567890',
    expirationDate = '2024-10-10 10:10:10',
    threshold = '部分男鞋用品可用'
  } = props?.couponData || {};
  const [visible, setVisible] = useState<boolean>(false);

  const open = useCallback(() => {
    setVisible(true);
    document.body.style.overflow = 'hidden'; // 禁用滚动
  }, []);

  const close = useCallback(() => {
    setVisible(false);
    document.body.style.overflow = 'auto'; // 恢复滚动
  }, []);

  return (
    <>
      <Button color='primary' onClick={open}>
        查看优惠券
      </Button>
      {visible
        ? createPortal(
            <div className={styles.myCouponDialog}>
              <div className={styles.mask} onClick={close} />
              <div className={styles.dialogContent}>
                <div className={styles.couponHeader}>
                  <div className={styles.couponName}>{couponName}</div>
                  <div className={styles.couponCode}>
                    <span>券码：{couponCode}</span>
                    <span onClick={() => copyText(couponCode)} className={styles.btn}>
                      复制
                    </span>
                  </div>
                </div>
                <div className={styles.couponCenter}>
                  <div />
                </div>
                <div className={styles.couponBottom}>
                  <div style={{ marginBottom: '6px' }}>
                    <span>有效期: </span>
                    <span>{expirationDate}</span>
                  </div>
                  <div>
                    <span>使用门槛: </span>
                    <span>{threshold}</span>
                  </div>
                </div>
              </div>
            </div>,
            document.getElementById('root') || document.body
          )
        : null}
    </>
  );
};

export default Coupon;

index.module.less

.myCouponDialog {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .mask {
    z-index: 1;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .dialogContent {
    z-index: 2;
    width: 80vw;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;

    .couponHeader {
      padding: 6px 24px;
      background-color: #fff;

      .couponName {
        font-size: 18px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0;
      }

      .couponCode {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 16px;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 4px;
        margin-top: 4px;

        .btn {
          color: #06b752;
        }
      }
    }

    .couponCenter {
      width: 100%;
      height: 48px;
      position: relative;
      overflow: hidden;

      & > div {
        position: absolute;
        top: 50%;
        left: 18px;
        right: 18px;
        z-index: 2;
        height: 0;
        border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
        padding: 0 18px;
      }

      &::before,
      &::after {
        z-index: 1;
        content: '';
        border: calc(50vw - 18px) solid #fff;
        position: absolute;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        top: 50%;
      }

      &::before {
        left: -50vw;
        transform: translateY(-50%);
      }

      &::after {
        right: -50vw;
        transform: translateY(-50%);
      }
    }

    .couponBottom {
      background-color: #fff;
      padding: 0 24px 24px;

      & > div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & > span:first-child {
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
}

utils

import { Toast } from 'antd-mobile';

/**
 * 复制文本
 * @param text
 * @returns
 */
export const copyText = (text: string) => {
  return new Promise(resolve => {
    Toast.show({ content: '复制成功' });
    if (navigator.clipboard?.writeText) {
      return resolve(navigator.clipboard.writeText(text));
    }
    // 创建输入框
    const textarea = document.createElement('textarea');
    document.body.appendChild(textarea);
    // 隐藏此输入框
    textarea.style.position = 'absolute';
    textarea.style.clip = 'rect(0 0 0 0)';
    // 赋值
    textarea.value = text;
    // 选中
    textarea.select();
    // 复制
    document.execCommand('copy', true);
    textarea.remove();
    return resolve(true);
  });
};

效果

备注：样式个人随便搞的，不必理会