@fekit/mobcss

@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. 完成核心功能