@jmdd/jmdd-react-price

React 价格处理插件，处理实时价和划线价显示逻辑和小数点位置。

索引

• 演示
• 参数
• 示例
• 版本

演示

暂无演示

开始

下载项目:

npm i @jmdd/jmdd-react-price

参数

| 参数名 | 参数类型 | 参数说明 | | :---------------------: | :-------------: | :--------------------------------------------------------------------------------------------------: | | data | object | 传入数据 | | data.realPrice | number / string | 实时价，为空、转为数字时 NaN 等状况下不显示 | | data.linePrice | number / string | 划线价，为空、实时价小于或等于划线价时，划线价不显示 | | data.beforeRealPrice | React Dom | 在实时价前插入内容 | | data.afterRealPrice | React Dom | 在实时价后插入内容 | | data.beforeLinePrice | React Dom | 在划线价前插入内容 | | data.afterLinePrice | React Dom | 在划线价后插入内容 | | | | | | conf | object | 传入配置 | | conf.classPrefix | string | 生成 dom 总容器的 className | | conf.currencySign | object | 货币符，不填写默认不生成标签自己用 CSS 的:before 或:after 写 如: currencySign:'¥' -> ¥100 | | conf.decimal | object | 小数点后面补零位数，不填写默为不补零完全按原数据显示 如： decimal：2 [ 299 -> 299.00 39.9 -> 39.90 ] | | conf.decimal | object | 小数点后面补零位数，不填写默为不补零完全按原数据显示 如： decimal：2 [ 299 -> 299.00 39.9 -> 39.90 ] | | conf.forceViewLinePrice | object | 强制显示划线价 |

示例

import React, { Component } from 'react';
import Price from '@jmdd/jmdd-react-price';
class Root extends Component {
  render() {
    return (
      <div className="root">
        {/* 实时价900.5，划线价910，货币符号用¥，价格小数点后2位，在实时价后插入一条"新用户专享"的标识内容 */}
        <Price data={{ realPrice: '900.5', linePrice: '910', afterRealPrice: <span className="new-user">新用户专享</span> }} conf={{ currencySign: '¥', decimal: 2 }} />
      </div>
    );
  }
}
export default Root;

版本

v1.1.0
1、新增beforeRealPrice, afterRealPrice, beforeLinePrice, afterLinePrice，forceViewLinePrice等5个入参

v1.0.3
1. 修复package.json 文件名错误

v1.0.2
1. 修复rollup.config.js内模块名Layer为Price

v1.0.1
1. 完善使用文档
2. 打包源文件上传NPM

v1.0.0
1. 完成核心功能