vue3修改带小数点的价格数字:小数点的前后数字,要分别显示成不同颜色和大小!已经封装成组件了!

news2024/11/12 18:37:05

需求:

修改带小数点的价格数字:小数点的前后数字,要分别显示成不同颜色和大小!已经封装成组件了!

效果:

前面大,后面小

代码:

组件:

<!--修改小数点前后数字不同颜色和大小的组件-->
<template>
  <view class="price-container">
    <text class="current-price">
     <text class="price-icon"> ¥</text>
      <!-- 显示小数点前的价格部分,应用传入的颜色和字体大小 -->
      <text :style="{ color: integerColor, fontSize: integerFontSize }" class="price-integer">
        {{ integerPart }}
      </text>
      <text class="dot">.</text>
      <!-- 显示小数点后的价格部分,应用传入的颜色和字体大小 -->
      <text :style="{ color: decimalColor, fontSize: decimalFontSize }" class="price-decimal">
        {{ decimalPart }}
      </text>
    </text>
  </view>
</template>

<script setup>
// 导入所需的 Vue API
import { computed, defineProps } from 'vue';

// 定义组件的 props
const props = defineProps({
  // 价格值,必填项
  price: {
    type: Number,
    required: true
  },
  // 整数部分字体颜色,默认黑色
  integerColor: {
    type: String,
    default: '#000000'
  },
  // 整数部分字体大小,默认 24px
  integerFontSize: {
    type: String,
    default: '24px'
  },
  // 小数部分字体颜色,默认黑色
  decimalColor: {
    type: String,
    default: '#000000'
  },
  // 小数部分字体大小,默认 16px
  decimalFontSize: {
    type: String,
    default: '16px'
  }
});

// 确保 price 是一个有效的数字
const numericPrice = computed(() => {
  return Number(props.price) || 0;
});

// 计算价格的整数部分
const integerPart = computed(() => {
  const priceStr = numericPrice.value.toFixed(2); // 保证小数点后有两位
  return priceStr.split('.')[0]; // 获取小数点前的部分
});

// 计算价格的小数部分
const decimalPart = computed(() => {
  const priceStr = numericPrice.value.toFixed(2); // 保证小数点后有两位
  return priceStr.split('.')[1]; // 获取小数点后的部分
});

</script>

<style lang="scss" scoped>
/* 定义价格容器的布局 */
.price-container {
  display: flex;
  align-items: baseline; /* 对齐基线,使得不同字体大小的文本对齐 */
}

/* 定义当前价格的样式 */
.current-price {
  display: flex;
  align-items: baseline; /* 对齐基线,使得不同字体大小的文本对齐 */
  .price-icon{
    font-size: 24rpx;
    margin-right: 2rpx;
  }
  .dot{
    color: #333333;
  }
}

/* 前面的整数,默认样式可以在这里定义 */
.price-integer {
  /* 这里可以设置默认样式 */
  color: #333333;

}

//后面的小数点
.price-decimal {
  /* 这里可以设置默认样式 */
  color: #333333;
}
</style>

使用组件:

灰色:

     <PriceDisplay
              :price="item.price"
              integerColor="#333333"
              integerFontSize="36rpx"
              decimalColor="#333333"
              decimalFontSize="24rpx"
              class="priceContainerWrapper"
          />

彩色:

   <PriceDisplay
              :price="123.45"
              integerColor="#FF5733"
              integerFontSize="30px"
              decimalColor="#33CFFF"
              decimalFontSize="18px"
          />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1973693.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

nodejs多版本随心切换-windows

nodejs多版本控制 1. 安装 nvm github下载地址 不需要卸载已安装的nodejs&#xff0c;安装时会让你选择nodejs的位置&#xff0c;可修改为你已经安装的路径&#xff0c;会自动搜索已安装版本&#xff0c;并进行弹窗询问&#xff0c;选择托管即可 2. 修改配置文件 在 nvm 安装…

全网最适合入门的面向对象编程教程:30 Python的内置数据类型-object根类

全网最适合入门的面向对象编程教程&#xff1a;30 Python 的内置数据类型-object 根类 摘要&#xff1a; 在 Python 中&#xff0c;所有的类都直接或间接继承自一个根类&#xff0c;这个根类是Object。Object类是 Python 中所有新式类的基础类&#xff0c;在 Python 的类层次结…

Docker安装Nacos及动态配置

文章目录 1.安装Nacos1.拉取镜像2.启动Nacos3.开启8848和9848端口1.88482.9848 4.访问nacos1.网址 http://guest:8848/nacos/ 2.Nacos动态配置&#xff08;无法实现bean动态加载&#xff09;1.新建一个配置&#xff0c;使其成为动态的2.引入Nacos依赖3.application.yml配置Naco…

常见病症之中医药草马齿苋

常见病症之中医药草马齿苋 1. 源由2. 马齿苋植物描述药用部分主要成分药理作用使用方法注意事项 2. 常用方剂2.1 马齿苋汤2.2 马齿苋粥 3. 马齿苋的奇效具体应用实例 4. 湿疹方剂4.1 常见方剂内服方剂加减调整外用方剂 4.2 加“马齿苋”内服方剂加减调整外用方剂 4.3 注意事项 …

【Spring Boot】配置 Spring Security

配置 Spring Security 1.继承 WebSecurityConfigurerAdapter2.配置自定义策略3.配置加密方式3.1 BCrypt 加密 4.自定义加密规则5.配置多用户系统5.1 构建 UserDetailsService 用户信息服务接口5.2 进行安全配置 6.获取当前登录用户信息的几种方式6.1 在 Thymeleaf 视图中获取6.…

第23集《大佛顶首楞严经》

请大家打开讲义第五十二页&#xff0c;癸八&#xff0c;约外道世谛对简显见性非因缘自然。 本经的修学特色&#xff0c;简单地讲&#xff0c;它是在处理生命的根本问题。就是当我们在行菩萨道的时候&#xff0c;我们会去布施、持戒、忍辱或者是禅定&#xff0c;在整个修学当中…

centos 8.5时间设置

编辑 chrony 配置文件 vim /etc/chrony.conf新增内容&#xff1a; server 210.72.145.44 iburst server ntp.aliyun.com iburst同时要注释一下&#xff1a;# pool 2.centos.pool.ntp.org iburst 重启chronydf服务 systemctl restart chronyd.service设置 chronyd 开机自启…

谷粒商城实战笔记-118-全文检索-ElasticSearch-进阶-aggregations聚合分析

文章目录 一&#xff0c;基本概念主要聚合类型 二&#xff0c;实战1&#xff0c;搜索 address 中包含 mill 的所有人的年龄分布以及平均年龄&#xff0c;但不显示这些人的详情2&#xff0c;按照年龄聚合&#xff0c;并且请求每个年龄的平均薪资 Elasticsearch 的聚合&#xff0…

大屏宁德烟草第二版总结,批量导入

toFixed toFixed(x) 方法返回一个表示 numObj 的字符串&#xff0c;如果不该x&#xff0c;会进行四舍五入。 includes() includes() 方法用来判断一个数组是否包含一个指定的值&#xff0c;根据情况&#xff0c;如果包含则返回 true&#xff0c;否则返回 false。 批量导入…

饿了吗新版bxet

声明(lianxi a15018601872) 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 前言(…

【Linux】网络编程_3

文章目录 十、网络基础5. socket编程socket 常见APIsockaddr结构简单的UDP网络程序 未完待续 十、网络基础 5. socket编程 socket 常见API // 创建 socket 文件描述符 (TCP/UDP, 客户端 服务器) int socket(int domain, int type, int protocol);// 绑定端口号 (TCP/UDP, 服…

LLM大模型的书那么多,如何快速选到适合自己的那一本?来,我教你!

大模型的书这么多&#xff0c;该怎么选呢&#xff1f;今天就来教大家怎么快速地从众多大模型书中选到你想要的那一本&#xff01; 朋友们如果有需要这些大模型书 扫码获取~ &#x1f449;CSDN大礼包&#x1f381;&#xff1a;全网最全《LLM大模型书籍资源包》免费分享&#xf…

SpringBoot入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享

场景 作为一名Java开发者&#xff0c;SpringBoot已经成为日常开发所必须。 势必经历过从入门到自学、从基础到进阶、从学习到强化的过程。 当经历过几年企业级开发的磨炼&#xff0c;再回头看之前的开发过程、成长阶段发现确实是走了好多的弯路。 作为一名终身学习的信奉者…

程序工具_doxygen

doxygen是API文档生成工具 安装和使用&#xff1a; 下载地址&#xff1a;https://www.doxygen.nl/download.html 安装一直next就可以。 打开后的界面&#xff1a; 使用&#xff1a; 选择好文件夹&#xff0c;然后 “Run dexygen”&#xff0c;就在选择的文件夹下生成html和…

浏览器用户文件夹详解 - WebData(八)

1.WebData简介 1.1 什么是WebData文件&#xff1f; WebData文件是Chromium浏览器中用于存储用户表单数据、自动填充信息和支付信息的一个重要文件。每当用户在浏览器中填写表单或保存支付信息时&#xff0c;这些数据都会被记录在WebData文件中。通过这些记录&#xff0c;浏览…

[PM]面试题-综合问题

思维题 说说当前的科技行业 web3是我比较感兴趣的方向, 在国内还处于起步阶段, web3重要的特点是去中心化, 依赖的技术有以太坊, 区块链, 智能合约, 现在位置还没有特别成熟的产品形态, 发展的比较好的方向就是数字藏品和游戏方向 列举一个你认为比较好的APP, 说明其独特之处…

【从零搭建SpringBoot3.x 项目脚手架】- 1. 工程初始化

为什么会有这个系列文章 在项目开发中&#xff0c;大多项目依旧沿用的是 JDK 8 Spring Boot 2.x 系列的技术栈&#xff0c;没有Spring Boot 3.x 的上手实践机会。在个人学习探索 Spring Boot 3.x 的过程中&#xff0c;遇到多数第三方框架集成和问题排查的技术问题&#xff0c…

优秀的行为验证码的应用场景与行业案例

应用场景 登录注册 &#xff1a; 验证码适用于App、Web及小程序等用户注册场景&#xff0c;可以抵御自动机恶意注册&#xff0c;垃圾注册、抵御撞库登录、暴力破解、验证账号敏感信息的修改&#xff0c;同时可以有效阻止撞库攻击&#xff0c;从源头进行防护&#xff0c;保障正…

Spring Sharding 启动加载慢问题排查

问题复现&#xff1a; Spring服务在启动的时候经常发现会在一个地方停顿很久&#xff0c;通过日志看到Spring 在初始化 Druid 数据的时候进行了阻塞操作&#xff0c;导致耗时接近2s 耗时对服务本身未造成太大影响&#xff0c;主要在启动的时候浪费了太久的时间 问题排查&…

Python酷库之旅-第三方库Pandas(062)

目录 一、用法精讲 241、pandas.Series.view方法 241-1、语法 241-2、参数 241-3、功能 241-4、返回值 241-5、说明 241-6、用法 241-6-1、数据准备 241-6-2、代码示例 241-6-3、结果输出 242、pandas.Series.compare方法 242-1、语法 242-2、参数 242-3、功能 …