ui-copms-by-rollup

Installation

pnpm add ui-copms-by-rollup

Basic Usage

统一引入

import { LazyImage, TestButton } from 'ui-copms-by-rollup';

const App = () => {
  return (
    <div style={{ backgroundColor: 'pink', width: 800, height: 800 }}>
      <LazyImage
        src="https://imgx.mediav.com/rimg.jpg?img=http://s3m.mediav.com/galileo/7e13fa3b9d959ab2c1a3562bbfc42f27_660x220_cover.jpg&size=640x360&resizetype=3&quality=100"
        alt="示例图片"
        width="200px"
        height="300px"
        imgWrapStyle={{ display: 'inline-block', borderRadius: 8 }}
        placeholder={
          <div
            style={{
              backgroundColor: '#e0e0e0',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            加载中...
          </div>
        }
      />
      <LazyImage
        src="https://imgx.mediav.com/rimg.jpg?img=http://s3m.mediav.com/galileo/7e13fa3b9d959ab2c1a3562bbfc42f27_660x220_cover.jpg&size=640x360&resizetype=3&quality=100"
        alt="示例"
        title="图片标题"
        width="300px"
        height="200px"
        imgWrapStyle={{ marginTop: '20px' }}
        placeholder={
          <div
            style={{
              backgroundColor: '#e0e0e0',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            加载中...
          </div>
        }
        data-id="123"
      />
    </div>
  );
};
export default App;

按需引入

// 只引入需要的组件，减小打包体积
import LazyImage from 'ui-copms-by-rollup/dist/components/LazyImage';
import TestButton from 'ui-copms-by-rollup/dist/components/TestButton';
或 
import { LazyImage, TestButton } from 'ui-copms-by-rollup';

const App = () => {
  return (
    <div>
      <LazyImage
        src="https://example.com/image.jpg"
        alt="按需引入示例"
        width="200px"
        height="200px"
      />
      <TestButton type="primary" onClick={() => console.log('Button clicked')}>
        按需引入的按钮
      </TestButton>
    </div>
  );
};
export default App;

Components

CustomButton

A custom button component based on antd Button.

Props

| 参数名 | 类型 | 默认值 | 描述 | | ------------ | ------------------- | ------------------------------------------------------------------------------- | -------------------------------------------- | | src | string | - | 图片地址，必填 | | alt | string | '' | 图片替代文本 | | width | string | - | 图片宽度，必填 | | height | string | - | 图片高度，必填 | | imgWrapStyle | React.CSSProperties | - | 自定义样式，应用于图片容器 | | className | string | - | 自定义类名，应用于图片容器 | | placeholder | React.ReactNode | <div style={{ backgroundColor: '#f0f0f0', width: '100%', height: '100%' }} /> | 图片加载前的占位内容 | | threshold | number | 0.1 | 懒加载阈值，图片进入视口的比例，取值范围 0-1 | | onLoad | () => void | - | 图片加载成功的回调函数 | | onError | () => void | - | 图片加载失败的回调函数 | | 其他 | any | - | 支持所有 HTML img 标签的其他属性 |

Install Dependencies

pnpm install

Build

pnpm run build

Development

pnpm run dev

Test

pnpm run test

Lint

pnpm run lint

License

MIT