uni app 显示中文拼音的组件(pinyin-pro)

说白了就是用了 pinyin-pro 插件 封装了一个view而已，直接看代码～～

pinyin-pro是一个很不错的插件，我们只需要安装(npm install pinyin-pro )就即可
中文转拼音、拼音音调、拼音声母、拼音韵母、多音字拼音、姓氏拼音、拼音匹配
插件地址：https://github.com/zh-lx/pinyin-pro

效果图：

1.你需要先安装pinyin-pro插件：

npm install pinyin-pro

2.组件代码

components/py-text-view/index.vue

<template>
  <view @click="onTab" class="py-item-box">
    <view class="item" v-for="(item, index) in getDataList()" :key="index">
      <view style="font-size: 28rpx">
        {{ getPy(item) }}
      </view>
      <view class="">
        {{ data[index] != null ? data[index] : '' }}
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
import { pinyin } from 'pinyin-pro';
export default Vue.extend({
  props: {
    data: {
      type: String,
      default: ''
    }
  },
  methods: {
    getDataList() {
      console.log(this.data);

      return pinyin(this.data, { type: 'array' });
    },
    ///判断是否符号
    ///符号的话返回空
    getPy(py: string) {
      if (!py) return '';
      var re = new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？+-/ ]|[\\\\/]"
      );
      return re.test(py) ? '' : py;
    },
    onTab() {
      this.$emit('click');
    }
  }
});
</script>

<style lang="scss" scoped>
.py-item-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .item {
    padding-inline-end: 16rpx;
    padding-bottom: 6rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>

3.引入方式：

...
import PyTextView from '@/components/py-text-view/index.vue';
...

  components: {
    PyTextView
  },

3.1使用方式:

 <py-text-view :data="data" />
 <!-- <py-text-view data="你好，我叫努尔" /> -->
 <!-- <py-text-view :data="data" @click="click" /> -->