华玥组件库

中文

English

中文

English

Appearance

Price 金额组件 ​

业务组件,突出金额小数点前大，小数点后小

TIP

平台差异说明 ​

APP(vue)H5微信小程序
✔✔✔

基本使用示例 ​

html
<!-- 全局使用 -->
<hy-price :text="price"></hy-price>
<!-- 单个组件引入 -->
<HyPrice :text="price"></HyPrice>
ts
import { HyPrice } from "hy-app"

const price = 10

设置颜色 ​

  • 通过设置color制定文本颜色
html
<template>
    <hy-price :text="price" color="#9CC53D"></hy-price>
</template>

设置大小 ​

  • 通过设置size制定文本大小
html
<template>
    <hy-price :text="price" :size="20"></hy-price>
</template>

保留6位小数 ​

  • 通过设置num设置小数点后几位
html
<template>
    <hy-price :text="price" :num="6"></hy-price>
</template>

设置前缀单位 ​

  • 通过设置symbol制定金额前缀单位
html
<template>
    <hy-price :text="price" symbol="$"></hy-price>
</template>

设置粗细 ​

  • 通过设置weight制定文本粗细
html
<template>
    <hy-price :text="price" :weight="900"></hy-price>
</template>

设置倾斜 ​

  • 通过设置slant制定文本是否倾斜
html
<template>
    <hy-price :text="price" :slant="true"></hy-price>
</template>

设置比例1、1.2、1.6 ​

  • 通过设置ratio设置中间文字突出大小
html
<template>
    <hy-price text="10.22" :ratio="1"></hy-price>
    <hy-price text="10.22" :ratio="1.2"></hy-price>
    <hy-price text="10.22"></hy-price>
    <hy-price text="10.22" :ratio="1.6"></hy-price>
</template>

API ​

参数说明类型默认值
text金额值string | number0.00
symbol金额符号string￥
ratio比例大小number1.4
num保留小数点后几位数number2
color字体颜色string#FE3232
size字体大小string | number12
weight字体粗细number500
slant是否倾斜booleanfalse
customStyle定义需要用到的外部样式CSSProperties-

Events ​

事件名说明回调参数
click点击金额text: 金额值
00:46