前端工作学习随笔（二）（汉字转换拼音）

Pau1
484 阅读3分钟

「时光不负，创作不停，本文正在参加2021年终总结征文大赛」

随笔一

这周主要开发一个定制化的富文本的组件

要求可以在导入txt文本后展示并添加一些定制化的标签，在传给后端时要求对标签转义，交给引擎处理时即可对文本进行处理生成对应的音频。

1. vue 点击切换动态修改Class变化,实现当前样式改变（点击选中高亮)

也算一个vue项目中经常会遇到的一个场景，还是记录一下

思路：首先将所有样式变为默认样式，然后将点击的元素变为active的样式，所以可以根据索引值进行判断

          <div
            :class="isactive == index ? 'list-active' : 'list'"
            v-for="(item, index) in list"
            :key="index"
            @click="changePy(index)"
          >
            {{ item }}
          </div>

通过给元素绑定点击事件

    changeStyle(index) {
      this.isactive = index
    }

2. 需要完成一个离线转换汉字为拼音的功能，并且还需要支持数字模式

项目需求比较特殊，故没有去使用一些已经封装好的npm包，就采取了一些笨办法……

大家如果有好的想法可以多多提出来^ ^

  • 首先从网上找到了一个很完整的汉字读音库，还是很全的，约2w+吧。

Snipaste_2022-01-04_11-44-50.png

  • 于是封装了一个函数，将其挂到要用的组件的window上，在beforeDestory的时候再卸掉。 折叠的部分就是全部的读音了 Snipaste_2022-01-04_11-48-31.png
  • 后续的操作就比较简单了，获取读音从音库中查找即可
// 获取汉字所有拼音 返回数组
export function getPinyins(hanzi) {
  var pinyinSeparator = ',' // 拼音分隔符
  var pys = window.pinyins[hanzi]
  var result = []
  if (!pys) {
    return result
  }
  var pysArray = pys.split(pinyinSeparator)
  return pysArray
}

拿到的数据就是这样的形式

image.png

  • 比较恶心的就是将声调转换为数字形式，例如：

image.png 没有想到太好的办法，具体思路就是分两步进行，第一部分负责提取没有声调的拼音组成的数组，第二部分负责用正则判断声调是第几声，然后将声调添加到上一个函数生成数组对应项上。

// 处理读音展示结果为数字模式
export function handlePinyin(pinyin) {
  var vowels = 'aeiouv'
  var toneVowels = 'āáǎàaēéěèeīíǐìiōóǒòoūúǔùuǖǘǚǜü'
  var pys = []
  const reg_tone1 = /(ā|ō|ē|ī|ū|ǖ)/
  const reg_tone2 = /(á|ó|é|í|ú|ǘ)/
  const reg_tone3 = /(ǎ|ǒ|ě|ǐ|ǔ|ǚ)/
  const reg_tone4 = /(à|ò|è|ì|ù|ǜ)/
  const reg_tone5 = /(a|o|e|i|u|ü)/
  // 声调
  const tone_num_arr = []

  // 第一部分
  // 将读音处理为无声调的形式
  for (var i = 0; i < pinyin.length; i++) {
    var py = pinyin[i]
    var py1 = ''
    for (var idx in py) {
      var k = -1
      var w = py[idx]
      // 寻找在有声调声母中的位置
      // 如果已添加音调后续元音不再更新音调
      if ((k = toneVowels.indexOf(w)) > -1) {
        // 计算当前声母在无音调声母的位置
        var pos = parseInt(k / 5)
        py1 += vowels[pos]
      } else {
        // 原样
        py1 += w
      }
    }
    pys.push(py1)
  }

  // 第二部分
  // 判断声调并添加声调到对应的读音上
  pinyin.forEach((_pinyin, index, array) => {
    // console.log(_pinyin, index, array)
    if (reg_tone1.test(_pinyin)) {
      tone_num_arr.push('1')
    } else if (reg_tone2.test(_pinyin)) {
      tone_num_arr.push('2')
    } else if (reg_tone3.test(_pinyin)) {
      tone_num_arr.push('3')
    } else if (reg_tone4.test(_pinyin)) {
      tone_num_arr.push('4')
    } else if (reg_tone5.test(_pinyin)) {
      tone_num_arr.push('5')
    } else {
      tone_num_arr.push('')
    }
    pys[index] += tone_num_arr[index]
  })
  return pys
}

如果有需要汉字读音库、拼音列表或者源码的可以随时私信我

3.一个巧妙的保留两位小数但是不四舍五入的办法

image.png

一开始真的想复杂了，因为不要四舍五入，故无法使用toFixed方法，于是想到了转字符串再去找小数点之后截取再转数字的复杂方法，直到看到这行思路很nice的代码。

const num = Math.floor(data[type] * 100) / 100

image.png 先将数字扩大一百倍，使用floor取整，之后再除以100，即达到效果。

4.作用于插槽在el-table中的使用

vue2.60版本后，可以用v-slot 指令取代 slot 和 solt-scope 指令

例如：

<template v-slot:default="slotProps">

当使用 Element 的 table-column 组件时，会碰到 row 的参数

这里的 row 是 Element 特有的参数 ，代表 slot 中传入的一行的内容，参考如下

image.png

可以使用该功能插入一些结构，或对数据进行一些筛选的操作

例如：要对这一列的数据进行筛选，有数据则展示数据，没有数据使用横线代替

<el-table-column prop="phone" label="手机号" align="center">
              <template v-slot="{ row }">
                <div v-if="row.phone">{{ row.phone }}</div>
                <div v-else>———</div>
              </template>
            </el-table-column>
avatar
文章
阅读
粉丝