vue3+ts 如何将数字转换为汉字大写 封装一个方法

1 篇文章 0 订阅

封装为一个方法 方便全局使用

export const changeToChinese = (data:string) => {
  const a = data.split('.')//分割
  const b = a[0].split(',')//分割整数
  if (a.length === 1)a.push('')
  let combin = ''//整数定义
  b.forEach(ite => combin += ite)//合并整数
  const Aword = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
  const Bword = ['角', '分']
  const Cword = ['', '拾', '佰', '仟']
  const Dword = ['', '万', '亿']
  const Eword = ['零', '元', '整']
  let returnWords = ''//返回值
  if (combin.length > 12) {
    console.error('超出限制')
    return ''
  }
  //整数部分拼接
  if (parseInt(combin) > 0) {
    let t = 0
    for (let i = 0; i < combin.length; i++) {
      const currentSite = combin.length - i - 1 //当前在第几位
      const currentData = combin.slice(i, i + 1)//当前元素
      const bigUnit = currentSite / 4 //4位一组单位选取 万|亿
      const smallUnit = currentSite % 4 //4位一组的位置 拾|佰|仟
      if (currentData === '0') { //是否为0
        t++
      } else {
        if (t > 0) {
          returnWords += Aword[0]//前面有0补零
        }
        t = 0//重置
        returnWords += Aword[parseInt(currentData)] + Cword[smallUnit]
      }
      if (smallUnit === 0 && t < 4) {
        returnWords += Dword[bigUnit]
        t = 0//重置
      }
    }
    returnWords += Eword[1]
  }
  //小数部分拼接
  //小数部分为全为0时
  if (a[1] === '00' || a[1] === '') {
    //金额为0时
    if (returnWords === '') {
      returnWords = Eword[0] + Eword[1] + Eword[2]
    } else {
      returnWords += Eword[2]
    }
    return returnWords
  } else {
    for (let i = 0; i < a[1].length; i++) {
      const currentData = a[1].slice(i, i + 1)//当前元素
      if (currentData !== '0') {
        returnWords += Aword[parseInt(currentData)] + Bword[i]
      } else if (i === 0) {
        returnWords += Aword[parseInt(currentData)]
      }
    }
  }
  return returnWords
}

使用

changeToChinese('100.00'
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 面包屑组件通常用于在网站或应用程序中显示当前页面的导航路径。在Vue3中,您可以使用TypeScript来封装一个面包屑组件。 以下是一个简单的面包屑组件的示例: ```typescript // BreadCrumb.ts import { defineComponent, PropType } from 'vue'; export default defineComponent({ name: 'BreadCrumb', props: { items: { type: Array as PropType<{ text: string; path: string }[]>, required: true, }, }, setup(props) { return { // 空函数,如果需要可以扩展 }; }, template: ` <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item" v-for="(item, index) in props.items" :key="index"> <a :href="item.path">{{ item.text }}</a> </li> </ol> </nav> `, }); ``` 在上面的示例中,我们使用 `defineComponent` 函数来定义一个Vue组件,并使用 `props` 属性来定义组件的输入。`items` prop 是一个数组,其中包含面包屑的每个部分的文本和路径。 在 `setup` 函数中,我们可以添加其他逻辑,如方法和计算属性。 最后,在组件的模板中,我们使用 `v-for` 指令来循环遍历 `items` 数组,并使用 `:href` 绑定每个面包屑部分的路径。 ### 回答2: Vue 3 + TypeScript 封装面包屑组件的步骤如下: 1. 首先,在Vue 3的构建工具中创建一个新的Vue组件,命名为Breadcrumb。 2. 在Breadcrumb组件中,使用@Prop装饰器声明一个名为items的prop,用于接收面包屑的数据。这个prop应该是一个数组,每个元素代表一个面包屑项,包含一个名为label的属性。 3. 在Breadcrumb组件的模板中,使用v-for指令遍历items数组,将label属性的值输出为面包屑项的文本。 4. 对于最后一个面包屑项,可以使用v-if和v-else指令判断是否为最后一个面包屑项。如果是最后一个面包屑项,则直接将label属性输出为文本。否则,输出一个带链接的面包屑项,点击时触发一个自定义事件(例如"breadcrumb-click"),传递当前面包屑项所在的索引。 5. 在Breadcrumb组件的脚本中,使用@Emit装饰器声明一个名为"breadcrumb-click"的自定义事件。在点击面包屑项时,通过调用emit方法触发该事件,并传递当前面包屑项的索引。 6. 在父组件中使用Breadcrumb组件时,将面包屑的数据作为items prop传递给Breadcrumb组件,并监听"breadcrumb-click"事件。在事件处理函数中,可以根据当前面包屑项的索引来进行相应的操作。 通过上述步骤,可以成功封装一个面包屑组件。在使用过程中,只需要传递相应的面包屑数据,并监听相应的面包屑点击事件,即可实现面包屑的功能。 ### 回答3: 在Vue3中使用TypeScript封装一个面包屑组件,可以按照以下步骤进行操作: 1. 首先,创建一个Breadcrumbs.vue的文件,用于编写面包屑组件的代码。 2. 在Breadcrumbs.vue中,使用script标签引入TypeScript,并导出一个默认的Vue组件对象。 3. 在组件中定义一个breadcrumbItems的属性,用于传递面包屑的数据。 4. 创建一个BreadcrumbsItem的接口,用于定义面包屑每一项的数据结构。例如,可以包含一个name属性表示面包屑的名称,以及一个to属性表示面包屑项的链接地址。 5. 在组件的模板中,使用v-for指令遍历breadcrumbItems数组,生成对应的面包屑项。 6. 在生成面包屑项的时候,可以使用router-link组件来包裹面包屑项的名称,并将to属性绑定到对应的to属性上。 7. 在组件的样式中,可以根据需求自定义面包屑的样式,例如设置面包屑项之间的分隔符、背景颜色等。 以下是一个简单的示例代码: ```vue <template> <div class="breadcrumbs"> <router-link v-for="item in breadcrumbItems" :key="item.name" :to="item.to">{{ item.name }}</router-link> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; interface BreadcrumbsItem { name: string; to: string; } export default defineComponent({ props: { breadcrumbItems: { type: Array as () => BreadcrumbsItem[], required: true, }, }, }); </script> <style scoped> .breadcrumbs { /* 添加样式 */ } </style> ``` 在使用该组件时,可以在父组件中通过传递breadcrumbItems属性来设置面包屑的数据。例如: ```vue <template> <Breadcrumbs :breadcrumbItems="breadcrumbItems" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ data() { return { breadcrumbItems: [ { name: '首页', to: '/' }, { name: '新闻', to: '/news' }, { name: '详情', to: '/news/detail' }, ], }; }, }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值