插件介紹

用過excel格式設(shè)置的人贰盗，都了解excel格式定義功能的強(qiáng)大，幾乎所有想要的格式竹椒，都可以設(shè)置童太。

image

因?yàn)榍岸艘残枰粋€(gè)功能全的自定義格式擴(kuò)展，vue-text-format這個(gè)擴(kuò)展移植了excel的功能胸完，可以在頁面上方便的對(duì)數(shù)據(jù)改變顯示格式书释。
使用方式也很簡(jiǎn)單，通過擴(kuò)展vue的自定義命令v-format的形式赊窥，綁定格式爆惧，就可以將內(nèi)部的文本進(jìn)行轉(zhuǎn)換。

使用方法

安裝

npm install vue-text-format

import Vue from 'vue'
import format from 'vue-text-format';
Vue.use(format);

使用

方式1：指令v-format
通過v-format傳入想要轉(zhuǎn)換的格式

<div v-format="'0.##%'">0.123</div>

方式2：函數(shù)調(diào)用锨能，vue原型上綁定了一個(gè)textFormat函數(shù)

export default {
    name: 'home',
    mounted() {
        let newVal = this.textFormat(0.123, '0.##%');
        // 將獲得12.3%
    }
}

示例

通過v-format傳入想要轉(zhuǎn)換的格式扯再，我們通過幾個(gè)例子，讓你了解一下這個(gè)格式代碼功能到底有多全多強(qiáng)大

<div v-format="'0.##%'">0.123</div>
<!--最終顯示的值是 【12.3%】轉(zhuǎn)換百分比 -->

<div v-format="'0.00%'">0.123</div>
<!--最終顯示的值是 【12.30%】 轉(zhuǎn)換百分比址遇，控制占位符-->

<div v-format="'#,##0.00'">1200000</div>
<!--最終顯示的值是 【1,200,000.00】千分位 -->

<div v-format="'￥#,##0.00'">1200000</div>
<!--最終顯示的值是 【￥1,200,000.00】前綴 -->

<div v-format="'0.00E+00'">1200000</div>
<!--最終顯示的值是 【1.20E+06】科學(xué)計(jì)數(shù)法熄阻，有占位符 -->

<div v-format="'0.##E+##'">1200000</div>
<!--最終顯示的值是 【1.2E+6】科學(xué)計(jì)數(shù)法，無有占位符 -->

<div v-format="'0000-00-00'">20180512</div>
<!--最終顯示的值是 【2018-05-12】改變格式-->

<div v-format="'000-0000-0000'">13812345678</div>
<!--最終顯示的值是 【138-1234-5678】手機(jī)號(hào)-->

<div v-format="'YYYY-MM-DD'">1562838244</div>
<!--最終顯示的值是 【2019-07-11】時(shí)間-->

<div v-format="'??/??'">0.28</div>
<!--最終顯示的值是 【7/25】?jī)晌粩?shù)分母的近似分?jǐn)?shù)-->

<div v-format="'?/?'">0.28</div>
<!--最終顯示的值是 【2/7】一位數(shù)分母的近似分?jǐn)?shù)-->

格式編碼是一套完整的聲明邏輯倔约，可以通過組合擴(kuò)展無限的顯示方式秃殉，下面有完整的講解，如果您覺得復(fù)雜浸剩，也可以有多種簡(jiǎn)單的使用方式钾军。

1、excel里copy

您可以在excel里copy過來您需要的格式編碼，就像文章開頭的圖片一樣，剩下的就交給vue-text-format去做就好了辽故。excel中功能的位置，單擊“格式”菜單中的“單元格”命令樱哼，然后單擊“數(shù)字”選項(xiàng)卡哀九。選完想要的格式，切換到自定義就會(huì)出現(xiàn)它的格式唇礁。

2勾栗、常用代碼事例

在后面的講解中，都給了一些demo盏筐，通過copy和簡(jiǎn)單的組裝這些demo围俘，就能解決絕大部分問題。

格式編碼介紹

如果你做一些更定制的格式琢融，就需要了解一下格式編碼聲明界牡，當(dāng)然也可以看任何一篇excel自定義格式的文章

1、【 # 】數(shù)字占位符

只顯有意義的零而不顯示無意義的零漾抬。小數(shù)點(diǎn)后數(shù)字如大于”#”的數(shù)量宿亡，則按”#”的位數(shù)四舍五入。

2纳令、【 0 】數(shù)字占位符

如果單元格的內(nèi)容大于占位符挽荠，則顯示實(shí)際數(shù)字，如果小于點(diǎn)位符的數(shù)量平绩，則用0補(bǔ)足圈匆。

3、【 ? 】數(shù)字占位符

在小數(shù)點(diǎn)兩邊為無意義的零添加空格捏雌，以便當(dāng)按固定寬度時(shí)跃赚，小數(shù)點(diǎn)可對(duì)齊，另外還用于對(duì)不等到長(zhǎng)數(shù)字的分?jǐn)?shù)
例：代碼：【??.??】12.121 顯示為【12.12】
例：代碼：【???.???】12.121 顯示為【?12.121】左側(cè)有一個(gè)填充空格
例：代碼：【???.????】12.121 顯示為【?12.121?】左右各一個(gè)填充空格

4性湿、【 % 】百分比

“%”：百分比纬傲。
例：代碼“#%”》羝担“0.1”顯示為“10%”

5叹括、【 , 】：千位分隔符

如時(shí)在代碼中“,”之后為空，則把原來的數(shù)字縮小1000倍宵荒。

6领猾、正負(fù)零區(qū)分顯示

正數(shù)格式;負(fù)數(shù)格式;零格式;文本格式

在自定義格式代碼中，最多可以指定四個(gè)節(jié)骇扇；每個(gè)節(jié)之間用分號(hào)進(jìn)行分隔，這四個(gè)節(jié)順序定義了格式中的正數(shù)面粮、負(fù)數(shù)少孝、零和文本。
如果用戶在表達(dá)方式中只指定兩個(gè)節(jié)熬苍，則第一部分用于表示正數(shù)和零稍走，第二部分用于表示負(fù)數(shù)袁翁。如果用戶在表達(dá)方式中只指定了一個(gè)節(jié)，那么所有數(shù)字都會(huì)使用該格式婿脸。如果在表達(dá)方式中要跳過某一節(jié)粱胜，則對(duì)該節(jié)僅使用分號(hào)即可。

7狐树、科學(xué)計(jì)數(shù)法

8焙压、【 @ 】文本占位符

如果只使用單個(gè)@，作用是引用原始文本

如果使用多個(gè)@抑钟，則可以重復(fù)文本涯曲。

9、【 * 】用 * 后面跟著的字符在塔，重復(fù)直到充滿空余列寬

可就用于仿真密碼保護(hù)

10幻件、【 \ 】和【""】用這種格式顯示下一個(gè)字符。

"文本"蛔溃，顯示雙引號(hào)里面的文本绰沥。
“\”：顯示下一個(gè)字符，和【"文本"】用途相同

11贺待、【 [顏色] 】

用指定的顏色顯示字符徽曲。可有八種顏色可選：紅色狠持、黑色疟位、黃色，綠色喘垂、白色甜刻、蘭色、青色和洋紅正勒。
例：代碼：“[青色];[紅色];[黃色];[蘭色]”得院。顯示結(jié)果為正數(shù)為青色，負(fù)數(shù)顯示紅色章贞，零顯示黃色祥绞，文本則顯示為蘭色
[顏色N]：是調(diào)用調(diào)色板中顏色，N是0~56之間的整數(shù)鸭限。
例：代碼：“[顏色3]”蜕径。單元格顯示的顏色為調(diào)色板上第3種顏色。

12败京、條件

可以單元格內(nèi)容判斷后再設(shè)置格式兜喻，判斷邏輯放到[ ]中括號(hào)里，例如[>1]代表>1的情況赡麦。條件格式化只限于使用三個(gè)條件朴皆，其中兩個(gè)條件是明確的帕识，另個(gè)是“所有的其他”。條件要放到方括號(hào)中遂铡。必須進(jìn)行簡(jiǎn)單的比較肮疗。

可以使用的運(yùn)算符有：

13、 【 ! 】轉(zhuǎn)義字符

由于引號(hào)是代碼常用的符號(hào)扒接。在單元格中是無法用【"】來顯示出來“"”伪货。要想顯示出來，須在前加入“!” 【!"】
例：代碼：【!"#!"】珠增〕瑁【10】顯示【"10"】

14、時(shí)間和日期代碼

常用日期和時(shí)間代碼蒂教，綁定的是10位或13位的時(shí)間戳
“YYYY”或“YY”：按四位（1900~9999）或兩位（00~99）顯示年

“MM”或“M”：以兩位（01~12）或一位（1~12）表示月巍举。

“DD”或“D”：以兩位（01~31）或一位（1~31）來表示天。

例：代碼：“YYYY-MM-DD”凝垛。2005年1月10日顯示為：“2005-01-10”

例：代碼：“YY-M-D”懊悯。2005年10月10日顯示為：“05-1-10”

“AAAA”：日期顯示為星期。

“H”或“HH”：以一位（0~23）或兩位（01~23）顯示小時(shí)

“m”或“mm”：以一位（0~59）或兩位（01~59）顯示分鐘

“s”或“ss”：以一位（0~59）或兩位（01~59）顯示秒

例：

15梦皮、【 _ 】：顯示一個(gè)和【_】符號(hào)下一個(gè)“文本”同等寬度的空格

結(jié)尾

希望大家在需要的時(shí)候多多使用炭分，也可以去下載源碼共同學(xué)習(xí)
源碼地址是
https://github.com/13601313270/vue-format
也可以加微信交流
微信號(hào)309568486