v-fomatter

介绍

用于格式化数据，支持字节、日期、货币、百分比格式化。

使用方法

将v-fomatter指令绑定到需要格式化的元素上，并设置value属性为需要格式化的数据，可以设置locale属性来确定当前区域，同时可以设置options来确定格式化选项。

中国货币

百分比

时间：传入数据为Date类型就会格式化

字节

查看代码

<template>
  <div class="banner">
    <h2>中国货币</h2>
    <div  v-fomatter="{value: money , locale:'zh-CN', options:{ style: 'currency', currency: 'CNY'}}"></div>
    <h2>百分比</h2>
    <div  v-fomatter="{value: percent , options:{ fractionDigits : 2}}"></div>
    <h2>时间：传入数据为Date类型就会格式化</h2>
    <div  v-fomatter="{value: time , options: { weekday: 'short', year : 'numeric', month: 'narrow', day:'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric'}}"></div>
    <h2>字节</h2>
    <div v-fomatter="{value: bytes , options:{ decimals: 2 }}"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { vFomatter } from '@cp-vuedir/core'

const money = ref(100000)
const percent = ref(0.5)
const time = ref(new Date())
const bytes = ref(5000)
</script>

<style scoped>
/* 容器样式 */
.banner {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
}

/* 标题样式 */
h2 {
  font-size: 20px;
  margin-bottom: 10px;
}


</style>

API

属性名	说明	类型	是否必选	默认值
value	需要格式化的数据	number | Date	✓	-
locale	当前区域	string	○	zh-CN
options	格式化选项	object	✓	-

options

属性名	说明	类型	是否必选	默认值
style	格式化样式，若需要初始化为货币，需要传值 currency	string	○	-
currency	货币符号	string	○	CNY
fractionDigits	若数据需要格式化为百分比就传，百分比小数位数	number	○	-
weekday	显示星期几的方式 (narrow、short、long)	string	○	-
year	年份 (2-digit、numeric)	string	○	-
month	月份 (2-digit、numeric、narrow、short、long)	string	○	-
day	显示日期的方式 (2-digit、numeric)。	string	○	-
hour	显示小时的方式 (2-digit、numeric)	string	○	-
minute	显示分钟的方式 (2-digit、numeric)。	string	○	-
second	显示秒的方式 (2-digit、numeric)	string	○	-
timeZone	显示时区名称的方式 (short、long)	string	○	-
minimumIntegerDigits	最小整数位数	number	○	-
minimumFractionDigits	最小小数位数	number	○	-
minimumFractionDigits	最小小数位数	number	○	-
maximumFractionDigits	最大小数位数	number	○	-