介紹
最近公司改造老項目似扔，要將數(shù)字類型的顯示效果做統(tǒng)一處理搪花；
一個一個改顯然不現(xiàn)實，所以做了一個公共組件統(tǒng)一處理薯嗤；
對數(shù)字格式的要求主要有：小數(shù)保留位數(shù)顽爹、是否顯示千分符、小數(shù)位不足是否補零骆姐、小數(shù)截斷模式
另外還附加一個顯示效果 居中镜粤、居左、居右
還要分不同類型來控制玻褪，比如金額肉渴，數(shù)量使用不同格式；
主要功能類分為3個
- NumberExtensions.js // 數(shù)字格式配置带射，數(shù)字剪切黄虱，格式化等核心功能
- NumberExtensions.jQuery.js // 基于 jQuery 自動渲染 input 框
- NumberExtensions.Vue.js // 基于 Vue2 自定義組件 number-input （還有一部分頁面是基于vue2做的）
源碼：gitee
效果展示
目前功能已完成，效果如下：數(shù)字輸入框JQuery版 demo源碼預覽下載- JSRUN
使用方法
$(function(){
/**
* 設置小數(shù)樣式
* @param {String|String[]} styleKeys 樣式名稱和別名庸诱。如：["price","p"]
* @param {Object} config 配置捻浦。如： { decimals: 4, mode: "Round", thousands: true, zreofill: false, align: "left", units: {} };
* decimals: 小數(shù)保留位數(shù) 0~20
* mode: 小數(shù)截取方式 Round-四舍五入/Ceil-向上取整/Floor-向下取整
* thousands: 是否顯示千分位 true/false
* zreofill: 小數(shù)位不足是否補零 true/false
* align: 對齊方式 left/right/center
* units: 單位配置
* @param {String} unit 單位
*/
Number.setConfig("price", "p"], { decimals: 4, mode: "Round", thousands: false, zreofill: false, align: "right" });
})
// 根據(jù)配置截取小數(shù)位數(shù)
var price = 1.234567.scale("p");
// 根據(jù)配置格式化數(shù)字字符串
var priceStr = 1234567.8.format("p");
// 同時操作截取和格式化
var str = number.scaleformat("p");
// 靜態(tài)方法晤揣，可以在不確定變量類型的情況下編碼
var str = Number.scaleformat(number,"p") || "-" //當參數(shù)number無法轉(zhuǎn)為數(shù)字時,返回null
// Number.scale(number,"p")
// Number.format(number,"p")
// Number.parse 方法，方便轉(zhuǎn)換數(shù)字朱灿，排除正負無窮昧识，可正確處理千分符
var number = Number.parse('1,234,567.76') || 0;
基于 jQuery
<!-- number-style="price" 數(shù)字樣式 -->
<!-- number-unit="元" 樣式單位（可忽略） -->
<!-- number-strict 嚴格數(shù)字（丟失焦點時如果內(nèi)容為非數(shù)字，可恢復上次正確的數(shù)字） -->
<!-- number-max="100" 數(shù)字內(nèi)容最大不能大于該值 -->
<!-- number-min="0" 數(shù)字內(nèi)容最大不能小于該值 -->
<input number-style="price" number-unit="元" number-strict number-max="100" number-min="0" />
<script>
$(function(){
// 設置數(shù)字格式盗扒，可結(jié)合實際情況從API中獲取頁面設置效果
Number.setConfig("price", "p"], { decimals: 4, mode: "Round", thousands: false, zreofill: false, align: "right" });
// 渲染頁面
Number.render();
})
</script>
基于Vue
<div id="app">
<!-- 屬性參考 jQuery 部分 -->
<number-input number-style="price" number-strict number-min="100" number-max="9999.99" v-model="price" />
</div>
<script>
// 設置數(shù)字格式跪楞，可結(jié)合實際情況從API中獲取頁面設置效果
Number.setConfig("price", "p"], { decimals: 4, mode: "Round", thousands: false, zreofill: false, align: "right" });
var app = new Vue({
el: '#app',
data: {
price: 12345
}
});
</script>
