Price 价格

介绍

用于展示价格。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入

import { IBestPrice } from "@ibestservices/ibest-ui";

代码演示

基础用法

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 0
  build() {
    Column() {
      IBestPrice({
        value: this.value
      })
    }
  }
}

小数点位数

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 8888
  build() {
    Column() {
      IBestPrice({
        value: this.value,
        decimal: 0
      })
    }
  }
}

划线价

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 8888
  build() {
    Column() {
      IBestPrice({
        value: this.value,
        decimal: 0,
        strikeThrough: true
      })
    }
  }
}

货币符号

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 8888.68
  build() {
    Column() {
      IBestPrice({
        value: this.value,
        symbol: "$"
      })
    }
  }
}

货币符号位置

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 8888.68
  build() {
    Column() {
      IBestPrice({
        value: this.value,
        symbol: "RMB",
        symbolPosition: "right"
      })
    }
  }
}

千位分隔

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 8888.6888
  build() {
    Column() {
      IBestPrice({
        value: this.value,
        decimal: 3,
        thousand: true
      })
    }
  }
}

自定义样式

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 8888.68
  build() {
    Column() {
      IBestPrice({
        value: this.value,
        symbolFontSize: 20,
        integerFontSize: 20,
        decimalPointFontSize: 18,
        decimalFontSize: 18,
        color: "#1989fa"
      })
    }
  }
}

API

@Props

参数	说明	类型	默认值
value	显示价格	string | number	0
symbol	货币符号	ResourceStr	￥
symbolPosition	货币符号位置, 可选值 left right	string	left
decimal	小数位位数	number	2
thousand	是否按照千分位显示	boolean	false
strikeThrough	文本装饰线	boolean	false
symbolFontSize	符号字体大小	string | number	14
integerFontSize	整数部分字体大小	string | number	16
decimalPointFontSize	小数点字体大小	string | number	14
decimalFontSize	小数部分字体大小	string | number	14
color	随机背景色	ResourceColor	#ee0a24