vue根据汉字添加拼音
效果如下 安装工具库 npm install pinyin-pro 或者 yarn add pinyin-pro 封装组件 change-pinyin {{item['hanzi']}} {{item['pinyin']}} import { pinyin } from 'pinyin-pro'; ex
效果如下
安装工具库
npm install pinyin-pro
或者
yarn add pinyin-pro
封装组件 change-pinyin
import { pinyin } from 'pinyin-pro';
export default {
name: "change-pinyin",
props: {
content: String,
},
mounted() {
for (let char of this.content) {
console.log("char==",char);
let pinyins = ''
// 判断是否为汉字
var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
if (reg.test(char)) {
pinyins = pinyin(char)
}
this.list.push(
{
"hanzi": char,
"pinyin": pinyins
}
)
}
},
data() {
return {
list: []
}
}
}
.pinyin {
margin: 5px;
}
.wordBox {
width: 2.2em;
display: inline-block;
text-align: center;
}
引用组件
import changePinyin from './components/changePinyin.vue';
export default {
name: "App",
components: {
changePinyin,
},
mounted() {
},
};
pinyin-pro组件的其他用法,可参考链接:
https://github.com/zh-lx/pinyin-pro