目录
<s-pinyin content="我们都有一个家,名字叫中国。"></s-pinyin>
s-pinyin 组件封装
其中使用了 pinyin_withtone.js ,
CSDN下载链接 https://download.csdn.net/download/weixin_41192489/13981231
百度网盘下载链接:https://pan.baidu.com/s/19hqkesGYOn5JSXW_fCXGBA 提取码:7wj9
导入pinyin_withtone.js
import {pinyinUtil} from './utils/pinyin_withtone.js'
pinyinUtil 对外提供以下方法,其中char 为传入的汉字
- 获取汉字拼音的首字母(默认大写) pinyinUtil.getFirstLetter(char)
- 获取汉字的拼音(带声调) pinyinUtil.getPinyin(char, ' ', true)
- 获取汉字的拼音(无声调) pinyinUtil.getPinyin(char, ' ', false)
<template>
<div class="s-pinyin">
<div class="wordBox" v-for="(item,index) in list" :key="index">
<ruby>{
{item['汉字']}}
<rt>{
{item['拼音']}}</rt>
</ruby>
</div>
</div>
</template>
<script>
import {pinyinUtil} from './utils/pinyin_withtone.js'
export default {
name: "s-pinyin",
props: {
content: String,
withTone: {
type: Boolean,
default: true
},
firstLetter: {
type: Boolean,
default: false
},
},
mounted() {
for (let char of this.content) {
let pinyin = ''
// 判断是否为汉字
var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
if (reg.test(char)) {
if (this.firstLetter) {
// 获取汉字拼音的首字母(默认大写) pinyinUtil.getFirstLetter(char)
pinyin = pinyinUtil.getFirstLetter(char)
} else {
// 获取汉字的拼音(带声调) pinyinUtil.getPinyin(char, ' ', true)
// 获取汉字的拼音(无声调) pinyinUtil.getPinyin(char, ' ', false)
pinyin = pinyinUtil.getPinyin(char, ' ', this.withTone)
}
}
this.list.push(
{
"汉字": char,
"拼音": pinyin
}
)
}
},
data() {
return {
list: []
}
}
}
</script>
<style scoped>
.s-pinyin {
margin: 5px;
}
.wordBox {
width: 2.2em;
display: inline-block;
text-align: center;
}
</style>
相关参数