拼音练习

├── .gitignore ├── README.md ├── babel.config.js ├── jsconfig.json ├── package.json ├── public ├── index.html └── py.ttf ├── py-data-process.js ├── py-data.txt ├── src ├── App.vue ├── assets │ └── py-data.js ├── longpress.js └── main.js ├── vue.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | package-lock.json 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pinyin-vue 2 | 最近陪儿子练习拼音的时候发现缺个工具，于是就有了它。 3 | 4 | > 推荐用法：投屏到电视，陪孩子练习； 5 | 6 | https://sunzsh.github.io/pinyin/ 7 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pinyin-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "node py-data-process.js && vue-cli-service serve", 7 | "build": "node py-data-process.js && vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "vue": "^2.6.14" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.12.16", 16 | "@babel/eslint-parser": "^7.12.16", 17 | "@vue/cli-plugin-babel": "~5.0.0", 18 | "@vue/cli-plugin-eslint": "~5.0.0", 19 | "@vue/cli-service": "~5.0.0", 20 | "eslint": "^7.32.0", 21 | "eslint-plugin-vue": "^8.0.3", 22 | "pinyin": "^3.0.0-alpha.4", 23 | "vue-template-compiler": "^2.6.14" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "@babel/eslint-parser" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 拼音练习 8 | 18 | 19 | 20 | 23 |

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /public/py.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunzsh/pinyin-vue/d98151a7333b842cac9f833fc1923f9553036371/public/py.ttf -------------------------------------------------------------------------------- /py-data-process.js: -------------------------------------------------------------------------------- 1 | const { pinyin } = require("pinyin") 2 | var fs = require('fs'); 3 | 4 | const data = fs.readFileSync("./py-data.txt", "utf-8").replace(/\s*/g, "") 5 | const pyData = [] 6 | 7 | for (const c of data) { 8 | pyData.push(pinyin(c)[0][0]) 9 | } 10 | 11 | fs.writeFileSync("./src/assets/py-data.js", `export default ${JSON.stringify(pyData)}`) 12 | console.log('生成成功') -------------------------------------------------------------------------------- /py-data.txt: -------------------------------------------------------------------------------- 1 | 一二三四五六七八九十上下左右大小多少土个入人儿火文木禾无口日月天中了子门不开目耳头米见 2 | 白田电也长山出飞马鸟云公车牛羊巾牙尺毛卜又心风力手水广升足走方半巴业本平书自已东西回片 3 | 皮生里果几用鱼今正雨两瓜衣来年万百丁齐冬说友话春朋高你绿们花红草爷亲节的岁行古处声知忙 4 | 洗真认父扫母爸写全完关家看笑着兴画会妈合奶放午收女气太早去亮和李语秀千香听远唱定连向以 5 | 更后意主总先起干明赶净同专工才级队蚂蚁前房空网诗黄林闭童立是我朵叶美机她过他时送让吗往 6 | 吧得虫很河借姐呢呀哪谁凉怕量跟最园脸因阳为光可法石找办许别那到都吓叫再做象点像照沙海桥 7 | 军竹苗井面乡忘想念王这从进边道贝男原爱虾跑吹乐地老快师短淡对热冷情拉活把种给吃练学习非 8 | 苦常问伴间共伙汽分要没孩位选北湖南秋江只帮星请雪就球跳玩桃树刚兰座各带坐急名发成动晚新 9 | 有么在变什条 -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 109 | 110 | 163 | -------------------------------------------------------------------------------- /src/assets/py-data.js: -------------------------------------------------------------------------------- 1 | export default ["yī","èr","sān","sì","wǔ","liù","qī","bā","jiǔ","shí","shàng","xià","zuǒ","yòu","dà","xiǎo","duō","shǎo","tǔ","gè","rù","rén","ér","huǒ","wén","mù","hé","wú","kǒu","rì","yuè","tiān","zhōng","le","zǐ","mén","bù","kāi","mù","ěr","tóu","mǐ","jiàn","bái","tián","diàn","yě","cháng","shān","chū","fēi","mǎ","niǎo","yún","gōng","chē","niú","yáng","jīn","yá","chǐ","máo","bǔ","yòu","xīn","fēng","lì","shǒu","shuǐ","guǎng","shēng","zú","zǒu","fāng","bàn","bā","yè","běn","píng","shū","zì","yǐ","dōng","xī","huí","piàn","pí","shēng","lǐ","guǒ","jī","yòng","yú","jīn","zhèng","yǔ","liǎng","guā","yī","lái","nián","wàn","bǎi","dīng","qí","dōng","shuō","yǒu","huà","chūn","péng","gāo","nǐ","lǜ","mén","huā","hóng","cǎo","yé","qīn","jié","de","suì","háng","gǔ","chǔ","shēng","zhī","máng","xǐ","zhēn","rèn","fù","sǎo","mǔ","bà","xiě","quán","wán","guān","jiā","kàn","xiào","zháo","xīng","huà","huì","mā","hé","nǎi","fàng","wǔ","shōu","nǚ","qì","tài","zǎo","qù","liàng","hé","lǐ","yǔ","xiù","qiān","xiāng","tīng","yuǎn","chàng","dìng","lián","xiàng","yǐ","gēng","hòu","yì","zhǔ","zǒng","xiān","qǐ","gān","míng","gǎn","jìng","tóng","zhuān","gōng","cái","jí","duì","mǎ","yǐ","qián","fáng","kōng","wǎng","shī","huáng","lín","bì","tóng","lì","shì","wǒ","duǒ","yè","měi","jī","tā","guò","tā","shí","sòng","ràng","ma","wǎng","bā","dé","chóng","hěn","hé","jiè","jiě","ní","yā","nǎ","shuí","liáng","pà","liáng","gēn","zuì","yuán","liǎn","yīn","yáng","wéi","guāng","kě","fǎ","shí","zhǎo","bàn","xǔ","bié","nà","dào","dū","xià","jiào","zài","zuò","xiàng","diǎn","xiàng","zhào","shā","hǎi","qiáo","jūn","zhú","miáo","jǐng","miàn","xiāng","wàng","xiǎng","niàn","wáng","zhè","cóng","jìn","biān","dào","bèi","nán","yuán","ài","xiā","pǎo","chuī","lè","dì","lǎo","kuài","shī","duǎn","dàn","duì","rè","lěng","qíng","lā","huó","bǎ","zhǒng","gěi","chī","liàn","xué","xí","fēi","kǔ","cháng","wèn","bàn","jiān","gòng","huǒ","qì","fēn","yào","méi","hái","wèi","xuǎn","běi","hú","nán","qiū","jiāng","zhī","bāng","xīng","qǐng","xuě","jiù","qiú","tiào","wán","táo","shù","gāng","lán","zuò","gè","dài","zuò","jí","míng","fā","chéng","dòng","wǎn","xīn","yǒu","mó","zài","biàn","shí","tiáo"] -------------------------------------------------------------------------------- /src/longpress.js: -------------------------------------------------------------------------------- 1 | // longpress.js 2 | export default { 3 | install(Vue, options = { 4 | time: 500 5 | }) { 6 | Vue.directive('longpress', { 7 | bind: function(el, binding, vNode) { 8 | // 确保提供的表达式是函数 9 | if (typeof binding.value !== 'function') { 10 | // 获取组件名称 11 | const compName = vNode.context.name; 12 | // 将警告传递给控制台 13 | let warn = `[longpress:] provided expression '${binding.expression}' is not afunction, but has to be `; 14 | if (compName) { warn += `Found in component '${compName}' `} 15 | console.warn(warn); 16 | } 17 | // 定义变量 18 | let pressTimer = null; 19 | // 定义函数处理程序 20 | // 创建计时器（ 1秒后执行函数） 21 | let start = (e) => { 22 | if (e.type === 'click' && e.button !== 0) { 23 | return; 24 | } 25 | if (pressTimer === null) { 26 | pressTimer = setTimeout(() => { 27 | // 执行函数 28 | handler(); 29 | }, options.time) 30 | } 31 | } 32 | // 取消计时器 33 | let cancel = () => { 34 | // 检查计时器是否有值 35 | if ( pressTimer !== null ) { 36 | clearTimeout(pressTimer); 37 | pressTimer = null; 38 | } 39 | } 40 | // 运行函数 41 | const handler = (e) => { 42 | // 执行传递给指令的方法 43 | binding.value(e) 44 | }; 45 | // 添加事件监听器 46 | el.addEventListener("mousedown", start); 47 | el.addEventListener("touchstart", start); 48 | // 取消计时器 49 | el.addEventListener("click", cancel); 50 | el.addEventListener("mouseout", cancel); 51 | el.addEventListener("touchend", cancel); 52 | el.addEventListener("touchcancel", cancel); 53 | } 54 | }) 55 | } 56 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import LongPress from './longpress.js' 4 | Vue.use(LongPress, {time: 500}) 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | render: h => h(App), 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | publicPath: "./", 4 | transpileDependencies: true 5 | }) 6 | --------------------------------------------------------------------------------