徽标

徽标组件。

基础使用

通过 amount 属性设置金额值。

<template>
	<pure-amount amount="168"></pure-amount>
</template>

货币符号

通过 symbol 属性设置货币符号。

<template>
	<pure-amount
		amount="168"
		symbol="¥"
	></pure-amount>
</template>

千分位

通过 thousands 属性设置是否显示千分位符号。

<template>
	<pure-amount
		amount="168"
		symbol="¥"
		thousands
	></pure-amount>
</template>

精度

通过 precision 属性设置精度，默认保留 2 位小数。

<template>
	<!-- 最终显示：168.568 -->
	<pure-amount
		amount="168.56868"
		symbol="¥"
		:precision="3"
	></pure-amount>
</template>

补零

通过 padZero 属性设置小数位数不够设置的精度时是否补零，默认不补零。

<template>
	<!-- 最终显示：168.00 -->
	<pure-amount
		amount="168"
		symbol="¥"
		padZero
	></pure-amount>
</template>

舍零

通过 dropZero 属性设置舍弃小数末尾的零。

<template>
	<!-- 最终显示：168.6 -->
	<pure-amount
		amount="168.60"
		symbol="¥"
		dropZero
	></pure-amount>
</template>

文本大小

默认组件内的货币符号、小数位的文本尺寸小于整数位的文本尺寸，可以通过一下属性调整，也可以通过样式调整：

• same-number: 将数字部分大小设为一致
• same-all: 将所有文本大小设为一致

<template>
	<!-- 数字部分大小一致 -->
	<pure-amount
		amount="168.60"
		symbol="¥"
		same-number
	></pure-amount>

	<!-- 所有文本大小一致 -->
	<pure-amount
		amount="168.60"
		symbol="¥"
		same-all
	></pure-amount>
</template>

属性

名称	类型	默认值	说明
symbol	String		货币符号
amount	[String, Number]		金额值
thousands	Boolean	true	是否显示千分位分隔符
precision	Number	2	金额值的小数位数
padZero	Boolean	false	是否在小数位不足时补零
dropZero	Boolean	false	是否在小数位末尾的零不显示
sameNumber	Boolean	false	是否将数字部分大小设为一致
sameAll	Boolean	false	是否将所有文本大小设为一致

事件

名称	参数	说明
onClick		点击事件

样式变量

名称	说明
--pure-amount-symbol-font-size	货币符号字体大小
--pure-amount-symbol-font-weight	货币符号字体粗细
--pure-amount-symbol-color	货币符号字体颜色
--pure-amount-symbol-margin	货币符号外边距
--pure-amount-symbol-padding	货币符号内边距
--pure-amount-dot-font-size	小数点字体大小
--pure-amount-dot-font-weight	小数点字体粗细
--pure-amount-dot-color	小数点字体颜色
--pure-amount-float-font-size	小数字体大小
--pure-amount-float-font-weight	小数字体粗细
--pure-amount-float-color	小数字体颜色
--pure-amount-small-font-size	相对较小的文字字体大小