riceball:
ๅ
่ฏด็ป่ฎบ๏ผLLM ๅฏนไบๅทฒ็ฅ็ๆจกไปฟๆฏๅ
ถๆๆ
้ฟ๏ผ็ฑปไผผๆจกๆฟไปฃ็ ๏ผไฝๆฏไผๆๆๅจ๏ผๆๆถๆพๅฐๅ้ขๅฐฑๆฏๅฎๆถ็ธๅผน๏ผๅฏนไบๅทฒ็ฅ็็ฐๆ็ๆ่ขญๆจกไปฟ่ฝๅๆฅ่ฏด๏ผclaude ๅฝ็ฌฌไธ๏ผๅ ไธบๅฎๆ ่ง็ๆๆ github ็ฌไบไธช้๏ผ่ฟ gist ้ฝๆฒกๆพ่ฟ๏ผๆ็่ณๆ็ๅช่ฆ็จๅฎ็้ฝ่ขซ Claude ๅฝไฝ็ด ๆใgemini ไผๆ่ชๅทฑ็ๆ่๏ผๅฆๆ่ฎฉๅฎๆนๅ๏ผๅฎไผ่ชๅทฑ่ฏปไบไผ็จ่ชๅทฑ็้ป่พๆฅๅ๏ผไธไผไธๅณ็
งๆฌ๏ผไฝๆฏๅคชๅคๆๅฎๅฐฑๆญ่ไบใ่ชๆๆๅๅคชไพ่ต vibe ๏ผๅฐๅ้ขไผๆๅพๅฎกๆฅ๏ผ็็กฎไผๅ็ฌจ๏ผ่ไธไนๅฎนๆไธ็ซ๏ผไฝๆฏ็็กฎ็ฎๅ็ฎๅ้ป่พ็ไปฃ็ ๏ผๅๅ
ๆต่ฏ๏ผๆๆกฃ้ฝๆฒก้ฎ้ข๏ผๅฏไปฅๅฝไธไธช็ฅ่ฏไธฐๅฏ็ๅฎไน ็ๅฉๆ๏ผๆถๆ่ฟไธ่ก๏ผๅช่ฝๅ่๏ผๅ
ณ้ฎ็ๅฐๆน่ฟๅพ็บ ๅใ
ๆ็จ็ๆฏGEMINI-CLI,ๅ ไธบๆๆณ่ฆ็ LLM ็่ชๅทฑๆๆณ๏ผ่ไธๆฏ่ฎฉ Claude ๅป็
งๆฌ.
่ฏ้ชๆฏๅบไบๆๅ
ญๅนดๅๅ็ QInputEx ไธไธช CUI(Conversational UI)็ๆ ธๅฟ็ปไปถ,่ฟไธชๆฏๅบไบ Quasar@v1/VUE@2 ็๏ผๅฐ่ฏ่ฎฉ AI ๅ็บงไธบ Quasar2/VUE3 ใ
ไธ่ฟๆ่ง่ฟไธช gemini ๅพๆฅ่บ๏ผๅ่ฟไธช่ฟ็จ๏ผ่ๆฏๆฅไธๅฏ่็่ฆๆฑๅ ้ค v1 ่็ๆฌ็ไปฃ็ ใ
ไบคๆตไบไธๆฌก๏ผๆฏๅคฉไธๆฌก๏ผๅบๆฌๅฎๆไบๆนๅ๏ผไฝๆฏๆ็ปๆๆพๅผไบ๏ผๆ่งๆฏๅ ไธบ vue3 ไธบไบๅขๅผบๆง่ฝ๏ผ็บ็ฒไบ็ตๆดปๆง๏ผๅฏนไบ่ฟๆ ท็ๅจๆ็ปไปถๅ
ถๅฎๆฏๆไธๅค๏ผไธ่ฟ LLM ๅนถๆฒกๆๆ้ๆใ่ฟๆฏๆๅๅฎ็ฐๆๅคๆ็ search ็ปไปถๆๅ็ฐ็ใ
ๆ ่ฎบๆๆ ท๏ผLLM ้ฝๆไธๅฎใ
็ฌฌไธๆฌกไบคๆต
ๅจ็ป่ฟไธ็ณปๅ็ๆ็คบ๏ผๅไฟฎๆญฃๅ๏ผๆนๅ OK ๏ผไฝๆฏๅชๆๅบ็ก็ปไปถๆนๅไบ๏ผ่้ๅฑๆฉๅฑ็ปไปถไธไธชไนๆฒกๆๆนๅ๏ผไธ่ฟ็็กฎๆฏ่ชๅทฑๅจไบ่ๅญ็๏ผไธๆฏ็
งๆฌใ
โโโ โโโโโโโโโ โโโโโโโโโโ โโโโโโ โโโโโโ โโโโโ โโโโโโ โโโโโ โโโโโ
โโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโ โโโโโ โโโโโโโโ โโโโโ โโโโโ
โโโโโโ โโโ โโโ โโโโ โ โ โโโโโโโโโโโโโโ โโโโ โโโโโโโโ โโโโ โโโโ
โโโโโโ โโโโ โโโโโโโ โโโโโโโโโ โโโโ โโโโ โโโโโโโโโโโโโ โโโโ
โโโโ โโโโ โโโโโ โโโโโโโ โโโโ โโโ โโโโ โโโโ โโโโ โโโโโโโโ โโโโ
โโโโ โโโโโ โโโโโ โโโโ โ โ โโโโ โโโโ โโโโ โโโโ โโโโโโโ โโโโ
โโโโ โโโโโโโโโโโ โโโโโโโโโโ โโโโโ โโโโโ โโโโโ โโโโโ โโโโโโโ โโโโโ
โโโ โโโโโโโโโ โโโโโโโโโโ โโโโโ โโโโโ โโโโโ โโโโโ โโโโโ โโโโโ
Tips for getting started:
1. Ask questions, edit files, or run commands.
2. Be specific for the best results.
3. /help for more information.
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ > ่ฏทไป็ป้
่ฏป v1 ็ฎๅฝ,ๅฐ v1 ็ฎๅฝไธ็ Quasar v1 ็ปไปถ้ๆไธบ Quasar v2 ็็ปไปถ,ๆพๅฐ Quasar UI kit ๆฌ้กน็ฎไธญ,ๅนถๆ นๆฎ็ปไปถ็็น็นไฟฎๆนๅฅฝ app-extension โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅฅฝ็๏ผๆๆ็ฝไบใๆจ็่ฆๆฑๆฏๅฐ v1/ ็ฎๅฝไธญ็ Quasar v1 ็ปไปถ้ๆไธบ Quasar v2 ็ๆฌ๏ผๅนถๅฐๅ
ถ้ๆๅฐ ui/ ็ฎๅฝไธ็ UI kit ้กน็ฎไธญ๏ผๅๆถๆดๆฐ app-extension ใ
่ฟๆฏไธไธชๆฏ่พๅคๆ็ไปปๅก๏ผๆไผๅๆญฅ่ฟ่กใๆ็่ฎกๅๅฆไธ๏ผ
1. ๅๆ v1 ็ปไปถ: ๆไผไป็ป้
่ฏป v1/components/qinputex/ ็ฎๅฝไธ็ๆไปถ๏ผ็นๅซๆฏ qinputex.tsx ๅ็ธๅ
ณ็ ts ๆไปถ๏ผไปฅๅฎๅ
จ็่งฃ่ฏฅ็ปไปถ็ๅ่ฝใๅฑๆง๏ผ props ๏ผใไบไปถ๏ผ events ๏ผๅๅ
้จ้ป่พใ
2. ๅๅปบ v2 ็ปไปถ้ชจๆถ: ๅจ ui/src/components/ ็ฎๅฝไธ๏ผๆไผๅๅปบไธไธชๆฐ็ Vue 3 ๅๆไปถ็ปไปถ๏ผ SFC, .vue ๆไปถ๏ผ๏ผไฝไธบ้ๆ็็ฎๆ ใ
3. ่ฟ็งป้ป่พๅๆจกๆฟ:
* ๅฐ็ปไปถ็้ป่พไป Vue 2/TypeScript (ๅฏ่ฝๆฏ Class-based ๆ Options API) ่ฟ็งปๅฐ Vue 3 ็ Composition API (<script setup>)ใ
* ๅฐ tsx ่ฏญๆณ็ผๅ็ๆจกๆฟ่ฝฌๆขไธบ Vue 3 ็ <template> HTML ่ฏญๆณใ
* ๅฐ Stylus (.styl) ๆ ทๅผ่ฝฌๆขไธบ SASS (.sass) ๅนถๆพๅ
ฅๆฐ็ปไปถ็ <style> ๅไธญใ
4. ้ๆๅฐ UI Kit: ๆดๆฐ ui/src/vue-plugin.js ๅ็ธๅ
ณ็ๅ
ฅๅฃๆไปถ (index.esm.js ็ญ)๏ผไปฅๆญฃ็กฎๅฏผๅบๅๆณจๅๆฐ็ v2 ็ปไปถใ
5. ๆดๆฐ App Extension: ไฟฎๆน app-extension/src/boot/register.js ๆไปถ๏ผไฝฟๅ
ถ่ฝๅคๅจไฝฟ็จๆญค App Extension ็้กน็ฎไธญๆญฃ็กฎๅฐๅ
จๅฑๆณจๅๆฐ็ v2 ็ปไปถใ
6. ๅปบ็ซๆต่ฏ็ฏๅข: ๆไผๅจ ui/dev/src/pages/ ไธญๅๅปบไธไธชๆต่ฏ้กต้ข๏ผๅผๅ
ฅ้ๆๅ็็ปไปถ๏ผไปฅ้ช่ฏๅ
ถๅ่ฝๆฏๅฆๆญฃๅธธใ
7. ๆธ
็: ๅจ็กฎ่ฎคๆฐ็ v2 ็ปไปถๅฎๅ
จๆญฃๅธธๅทฅไฝๅ๏ผๆไผๅปบ่ฎฎๅ ้ค v1 ็ฎๅฝไปฅไฟๆ้กน็ฎๆดๆด๏ผๅนถๅจๅพๅฐๆจ็ๅๆๅๆง่กๅ ้คๆไฝใ
่ฟไธช่ฎกๅๅฌ่ตทๆฅๅฏไปฅๅ๏ผ
ๅฆๆๅฏไปฅ๏ผๆๅฐไป็ฌฌไธๆญฅๅผๅง๏ผๅๆ v1 ็ปไปถ็ๆบไปฃ็ ใๆๅฐ้ฆๅ
้
่ฏปๆๆ ธๅฟ็็ปไปถๆไปถใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ ReadFile v1/components/qinputex/qinputex.tsx โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅฅฝ็๏ผๆๅทฒ็ปไป็ป้
่ฏปไบ qinputex.tsx ็ไปฃ็ ใ่ฟๆฏไธไธชไฝฟ็จ Vue 2 ็ฑป็ปไปถๅ TSX ่ฏญๆณ็ผๅ็ๅคๆ็ปไปถใ
ไธบไบ็ปง็ปญ้ๆ๏ผๆ้่ฆไบ่งฃๅฎ็่พ
ๅฉๆจกๅใๆๅฐ้ฆๅ
้
่ฏป consts.ts ๅ hyphenate.ts ๆฅ็่งฃๅ
ถๆ ธๅฟๆฐๆฎ็ปๆๅ่พ
ๅฉๅฝๆฐใ
โฆ ๅฅฝ็๏ผๆๅทฒ็ปๅๆไบ v1 ็ปไปถ็ๆ ธๅฟไปฃ็ (qinputex.tsx, consts.ts, hyphenate.ts) ไปฅๅๅฝๅ UI kit ็ๅ
ฅๅฃ (vue-plugin.js) ๅๆต่ฏ้กต้ข (Index.vue)ใ
็ฐๅจ๏ผๆๅฐๅผๅงๅฎ้
็้ๆๅทฅไฝใ
็ฌฌไธๆญฅๆฏๅๅปบๆฐ็ v2 ็ปไปถๆไปถใๆๅฐๅจ ui/src/components/ ็ฎๅฝไธๅๅปบไธไธชๅไธบ QInputEx/ ็ๆฐ็ฎๅฝ๏ผๅนถๅจๅ
ถไธญๅๅปบไธไธช QInputEx.vue ๆไปถใๅๆถ๏ผๆไนไผๅฐ v1 ็ๆฌไธญ็ consts.ts ๅ hyphenate.ts
็้ป่พๅๅนถๅนถ่ฝฌๆขไธบ JavaScript ๏ผๆพๅ
ฅ ui/src/components/QInputEx/utils.js ไธญ๏ผไปฅไพๆฐ็ปไปถไฝฟ็จใ
ๆๅฐๅ
ๅๅปบ utils.js ๆไปถใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ WriteFile Writing to ui/src/components/QInputEx/utils.js โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ็ฐๅจ๏ผๆๅฐๅๅปบ QInputEx.vue ็ปไปถ็้ชจๆถใ่ฟไธชๆไปถๆๅๅฐๅ
ๅซ <template>, <script setup>, ๅ <style> ้จๅ๏ผๅนถๅผๅ
ฅๅๅๅๅปบ็ utils.js ใๆๅฐๆ v1 ็ TSX ๆจกๆฟ็้ป่พ็จ Vue 3 ็ๆจกๆฟ่ฏญๆณ้ๅ๏ผๅนถๅฐๆ ทๅผไป
Stylus ่ฝฌๆขไธบ SASS ใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ WriteFile Writing to ui/components/QInputEx/QInputEx.vue โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๆๅทฒๆๅๅๅปบไบ QInputEx.vue ๅ utils.js ใ
็ฐๅจ๏ผๆ้่ฆๅฐ่ฟไธชๆฐ็ปไปถ้ๆๅฐ UI kit ไธญ๏ผไปฅไพฟๅฎๅฏไปฅๅจๅผๅๆๅกๅจไธญ่ฟ่กๆต่ฏใๆๅฐไฟฎๆน ui/src/vue-plugin.js ๆฅๅฏผๅ
ฅๅๅฏผๅบ QInputEx ็ปไปถใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ Edit ui/src/vue-plugin.js: import Component from './compo... => import QInputEx from './compon... โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ็ฐๅจ vue-plugin.js ๅทฒ็ปๆดๆฐ๏ผQInputEx ็ปไปถๅบ่ฏฅๅฏไปฅ่ขซ Quasar UI kit ๆญฃ็กฎ่ฏๅซใ
ๆฅไธๆฅ๏ผๆๅฐๅจ ui/dev/src/pages/Index.vue ไธญๆทปๅ QInputEx ็ปไปถ๏ผไปฅไพฟๆไปฌๅฏไปฅๅจๅผๅ็ฏๅขไธญๆต่ฏๅฎใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ Edit ui/dev/src/pages/Index.vue: <template>... => <template>... โ
โ โ
โ Error: Failed to edit, could not find the string to replace. โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ็่ตทๆฅ Index.vue ็ๅ
ๅฎนไธๆ้ขๆ็ไธๅฎๅ
จไธ่ด๏ผๅฏผ่ดๆฟๆขๅคฑ่ดฅใ่ฟๆฏๅ ไธบ Index.vue ๅทฒ็ปๅ็ไบๅๅใ
ๆๅฐ้ๆฐ่ฏปๅ ui/dev/src/pages/Index.vue ็ๅ
ๅฎน๏ผ็ถๅๆ นๆฎๆๆฐ็ๅ
ๅฎน่ฟ่กๆฟๆขใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ ReadFile ui/dev/src/pages/Index.vue โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅฅฝ็๏ผๆ็ๅฐไบ Index.vue ็ๆๆฐๅ
ๅฎนใๅฎ็ฐๅจๆฏไธไธชๆต่ฏ้กต้ขๅ่กจใไธบไบๆต่ฏ QInputEx ๏ผๆๅฐๅๅปบไธไธชๆฐ็ๆต่ฏ้กต้ข TestQInputEx.vue ๅจ ui/dev/src/pages/ ็ฎๅฝไธ๏ผๅนถๅจ ui/dev/src/router/pages.js
ไธญๆทปๅ ่ทฏ็ฑใ
้ฆๅ
๏ผๅๅปบ TestQInputEx.vue ใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ WriteFile Writing to ui/dev/src/pages/TestQInputEx.vue โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ็ฐๅจ๏ผๆๅฐไฟฎๆน ui/dev/src/router/pages.js ๆฅๆทปๅ TestQInputEx ้กต้ขใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ ReadFile ui/dev/src/router/pages.js โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ pages.js ๆฏ้่ฟ require.context ๅจๆ็ๆ่ทฏ็ฑ็ใ่ฟๆๅณ็ๆไธ้่ฆๆๅจไฟฎๆน pages.js ๏ผๅช้่ฆ็กฎไฟ TestQInputEx.vue ๅญๅจไบ ui/dev/src/pages/ ็ฎๅฝไธๅณๅฏใ
็ฐๅจ๏ผๆๅฐๅฐ่ฏ่ฟ่ก pnpm dev ๆฅๅฏๅจๅผๅๆๅกๅจ๏ผๅนถๆฃๆฅ QInputEx ็ปไปถๆฏๅฆๆญฃๅธธๅทฅไฝใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ - Shell https_proxy=http://localhost:8088 pnpm dev [in ui] (Starting Quasar dev server for UI kit) โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ > ๆ ๆณๅทฅไฝ: [Quasar] boot error: ReferenceError: Component is not defined โ
โ at Module.install (vue-plugin.js:7:1) โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ ReadFile ui/src/vue-plugin.js โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๆจ่ฏดๅพๅฏน๏ผๆ็ฏไบไธไธช้่ฏฏใๅจ vue-plugin.js ไธญ๏ผๆๆฟๆขไบ import Component ๏ผไฝๆฏๅฟ่ฎฐไบๅจ install ๅฝๆฐไธญๅฐ app.component(Component.name, Component) ๆนไธบ app.component(QInputEx.name, QInputEx)ใ
ๆๅฐ็ซๅณไฟฎๅค่ฟไธช้ฎ้ขใ
โฆ ็ฐๅจ vue-plugin.js ๅบ่ฏฅๅทฒ็ปไฟฎๅคไบใ่ฏทๅๆฌกๅฐ่ฏ่ฟ่ก pnpm dev ใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ > Failed to resolve component: q-input-ex โ
โ If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. โ
โ at <TestQInputEx onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > โ
โ at <RouterView> โ
โ at <QPageContainer> โ
โ at <QLayout view="lHh Lpr lFf" > โ
โ at <MyLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {โฆ} > > โ
โ at <RouterView> โ
โ at <App> โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๆๆ็ฝไบ๏ผFailed to resolve component: q-input-ex ้่ฏฏ่กจๆ q-input-ex ็ปไปถๆฒกๆ่ขซๆญฃ็กฎๆณจๅใ
ๅจ Vue 3 ไธญ๏ผไฝฟ็จ <script setup> ็็ปไปถ๏ผๅ
ถ name ๅฑๆง้ๅธธๆฏไปๆไปถๅๆจๆญๅบๆฅ็๏ผไพๅฆ QInputEx.vue ไผ่ขซๆจๆญไธบ QInputEx ๏ผใ็ถ่๏ผๅจๆจกๆฟไธญไฝฟ็จๆถ๏ผ้ๅธธไผไฝฟ็จ kebab-case ๅฝขๅผ๏ผ q-input-ex ๏ผใ
ๆ้่ฆ็กฎไฟ vue-plugin.js ๅจๆณจๅ็ปไปถๆถไฝฟ็จไบๆญฃ็กฎ็ๅ็งฐใ้ๅธธ๏ผQuasar ็ปไปถไผๆไธไธช name ๅฑๆง๏ผๅนถไธๅจๆณจๅๆถไฝฟ็จ่ฟไธชๅฑๆงใ
ๆๅฐๆฃๆฅ ui/src/components/Component.js (ๆง็็คบไพ็ปไปถ) ๆฏๅฆไฝๅฎไนๅ
ถ name ๅฑๆง็๏ผไปฅไพฟๆๅฏไปฅๅจ QInputEx.vue ไธญไนๆ็กฎๅฎไนๅฎ๏ผๆ่
ๅจ vue-plugin.js ไธญไฝฟ็จ kebab-case ๆณจๅใ
้ฆๅ
๏ผๆๅฐ่ฏปๅ ui/src/components/Component.js ็ๅ
ๅฎนใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ ReadFile ui/src/components/Component.js โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅฅฝ็๏ผๆ็ๅฐ Component.js ไธญๆ็กฎๅฎไนไบ name: 'QInputEx'ใ่ฟๆๅณ็ๅจ vue-plugin.js ไธญไฝฟ็จ QInputEx.name ๆฏๆญฃ็กฎ็ใ
้ฎ้ขๅฏ่ฝๅบๅจ QInputEx.vue ไธญๆฒกๆๆ็กฎ่ฎพ็ฝฎ name ๅฑๆง๏ผๆ่
QInputEx.vue ๅฏผๅบ็ไธๆฏไธไธช็ปไปถ้้กนๅฏน่ฑกใ
ๅจไฝฟ็จ <script setup> ็ๆ
ๅตไธ๏ผ็ปไปถ็ name ๅฑๆง้ๅธธไธ้่ฆๆพๅผๅฎไน๏ผVue ไผๆ นๆฎๆไปถๅ่ชๅจๆจๆญใไฝๆฏ๏ผไธบไบ็กฎไฟๅ
ผๅฎนๆงๅๆ็กฎๆง๏ผๅฐคๅ
ถๆฏๅจไฝไธบๅบ็ปไปถๅๅธๆถ๏ผๆพๅผๅฎไน name ๅฑๆงๆฏไธไธชๅฅฝไน ๆฏใ
ๆๅฐไฟฎๆน QInputEx.vue ๏ผๅจ <script setup> ไธญๆทปๅ defineOptions({ name: 'QInputEx' }); ๆฅๆ็กฎๆๅฎ็ปไปถๅ็งฐใ่ฟๅฐ็กฎไฟ็ปไปถๅจ่ขซ Quasar ๆไปถๆณจๅๆถ๏ผๅ
ถๅ็งฐๆฏ QInputEx ใ
็ถๅ๏ผๅจๆจกๆฟไธญไฝฟ็จ q-input-ex ๅบ่ฏฅๆฏๆญฃ็กฎ็๏ผๅ ไธบ Quasar ไผๅฐ PascalCase ็็ปไปถๅ่ฝฌๆขไธบ kebab-case ใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ Edit ui/components/QInputEx/QInputEx.vue: <script setup> => <script setup>... โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๆๅทฒ็ปไฟฎๆนไบ QInputEx.vue ๏ผๆ็กฎๆๅฎไบ็ปไปถๅ็งฐใ็ฐๅจ่ฏทๅๆฌกๅฐ่ฏ่ฟ่ก pnpm dev ใ
โญโโโโโโโโโโโโโโโโโโโโโโฎ
โ > ๅบๆฌๆพ็คบๆญฃๅธธไบ! โ
โฐโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅคชๆฃไบ๏ผๅฌๅฐ QInputEx ๅบๆฌๆพ็คบๆญฃๅธธ๏ผๆๅพ้ซๅ
ดใ
่ฟๆๅณ็็ปไปถ็ๆณจๅๅๅบๆฌๆธฒๆๅทฒ็ปๆๅใ็ฐๅจ๏ผๆไปฌ้่ฆ่ฟไธๆญฅ้ช่ฏๅ
ถๅ่ฝๆฏๅฆๅฎๆด๏ผๅนถๅค็ไนๅ v1 ็ๆฌไธญ็ๅคๆ้ป่พ๏ผไพๅฆ attaches ๅ popup ใ
ๆฅไธๆฅ๏ผๆๅฐ๏ผ
1. ้ช่ฏ `QInputEx` ็ๅบๆฌๅ่ฝ๏ผ็กฎ่ฎค v-model ๅๅ็ปๅฎใlabel ็ญๅบๆฌ props ๆฏๅฆๆญฃๅธธๅทฅไฝใ
2. ้ๆญฅๅฎ็ฐ `attaches` ้ป่พ๏ผๅจ TestQInputEx.vue ไธญๆทปๅ ไธไบๅธฆๆ attaches ็ QInputEx ๅฎไพ๏ผๅนถ็กฎไฟๅฎไปฌๆญฃ็กฎๆธฒๆๅไบคไบใ
3. ๅฎ็ฐ `popup` ้ป่พ๏ผๆทปๅ ๅธฆๆ popup ็ QInputEx ๅฎไพ๏ผๅนถ้ช่ฏๅผนๅบ็ปไปถ็ๅ่ฝใ
ไธบไบ่ฟ่ก่ฟไบๆต่ฏ๏ผๆ้่ฆไฟฎๆน ui/dev/src/pages/TestQInputEx.vue ๏ผๆทปๅ ๆดๅค็ QInputEx ๅฎไพๅไธไบๆต่ฏๆฐๆฎใ
้ฆๅ
๏ผๆๅฐไฟฎๆน TestQInputEx.vue ๏ผๆทปๅ ไธไธช็ฎๅ็ QInputEx ๅฎไพ๏ผๅนถๅฐ่ฏไฝฟ็จ type ๅฑๆงๆฅๆต่ฏไธๅ็่พๅ
ฅ็ฑปๅใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ ReadFile ui/dev/src/pages/TestQInputEx.vue โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅฅฝ็๏ผๆๅฐไฟฎๆน TestQInputEx.vue ๏ผๆทปๅ ๆดๅค็ QInputEx ๅฎไพ๏ผๅนถๅฐ่ฏไฝฟ็จ type ๅฑๆงๆฅๆต่ฏไธๅ็่พๅ
ฅ็ฑปๅ๏ผไปฅๅ attaches ็ๅบๆฌๅ่ฝใ
็ฑไบ QInputEx ็ attaches ไพ่ตไบ consts.ts ไธญๅฎไน็ InputAttach ็ปๆ๏ผๆ้่ฆ็กฎไฟ่ฟไบ็ปๆๅจ utils.js ไธญ่ขซๆญฃ็กฎๅฐๅค็ใ
ๆๅฐๆทปๅ ไธไธช็ฎๅ็ QInputEx ๅฎไพ๏ผๅนถๅฐ่ฏไฝฟ็จ type ๅฑๆงๆฅๆต่ฏไธๅ็่พๅ
ฅ็ฑปๅใๅๆถ๏ผๆไนไผๆทปๅ ไธไธชๅธฆๆ prepend ๅ append ๆๆงฝ็ QInputEx ๅฎไพ๏ผไปฅ้ช่ฏ attaches ็ๅบๆฌๅ่ฝใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ WriteFile Writing to ui/dev/src/pages/TestQInputEx.vue โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๆๅทฒ็ปๆดๆฐไบ TestQInputEx.vue ๏ผๆทปๅ ไบๅคไธช QInputEx ๅฎไพ๏ผๅ
ๆฌไธๅ type ็่พๅ
ฅๆกไปฅๅๅธฆๆ prepend, append, before, after ๆๆงฝ็่พๅ
ฅๆกใ
็ฐๅจ๏ผ่ฏทๅๆฌก่ฟ่ก pnpm dev ๏ผๅนถๆฃๆฅ่ฟไบๆฐ็ QInputEx ๅฎไพๆฏๅฆๆญฃๅธธๆพ็คบๅๅทฅไฝใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ > ๆฐๅญๅ textarea ๆพ็คบๆญฃๅธธ, Input with Prepend and Append ๅพๆ ๅจๅไธ่กๅนถไธ็น close ไบไปถ่งฆๅไน OK, โ
โ > ๆๅ Input with Before and After ๆพ็คบไบไธ่ก,็ฌฌไธ่กๆฏๅคดๅ icon,็ฌฌไบ่กๆฏ่พๅ
ฅๆก,็ฌฌไธ่กๆฏ send โ
โ icon,่ฟๆฏๆญฃๅธธ็ไน? โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๆจ่งๅฏๅพๅพไป็ป๏ผInput with Before and After ๆพ็คบไธบไธ่ก็กฎๅฎไธๆญฃๅธธใ
ๆ นๆฎ Quasar ็่ฎพ่ฎกๅๅๅง qinputex.tsx ็ๅฎ็ฐ๏ผbefore ๅ after ๆๆงฝ็ๅ
ๅฎนๅบ่ฏฅไธ่พๅ
ฅๆกๅจๅไธ่กๆพ็คบ๏ผๅฐฑๅ prepend ๅ append ไธๆ ท๏ผๅชๆฏๅฎไปฌไฝไบ่พๅ
ฅๆก็ๅค้จใ
ๆไนๅ็้ๆๅจๅค็ before ๅ after ๆๆงฝๆถๆ่ฏฏ๏ผๅฐๅฎไปฌๆธฒๆๆไบ็ฌ็ซ็ๅ็บงๅ
็ด ๏ผๅฏผ่ดไบๆข่กใๅฎ้
ไธ๏ผQInput ็ปไปถๆฌ่บซๅฐฑๆไพไบ before ๅ after ๆๆงฝ๏ผๆไปฌๅบ่ฏฅๅฐๅ
ๅฎน็ดๆฅไผ ้็ป QInput ๏ผ่ไธๆฏๅจ
QInputEx ๅ
้จๅ็ฌๆธฒๆใ
ๆๅฐ็ซๅณไฟฎๅค ui/src/components/QInputEx/QInputEx.vue ไธญ็ๆจกๆฟๅ็ธๅ
ณ้ป่พ๏ผ
1. ไฟฎๆนๆจกๆฟ๏ผๅฐ before ๅ after ๆๆงฝ็ๅ
ๅฎน็ดๆฅไฝไธบๅฝๅๆๆงฝไผ ้็ปๅ
้จ็ QInput ๆ QSelect ็ปไปถใ
2. ่ฐๆด้ป่พ๏ผ
* hasExternalSlots ๏ผๆๅฐ้ๅฝๅไธบ hasTopOrBottomSlots ๏ผๅฐๅชๆฃๆฅ top ๅ bottom ๆๆงฝใ
* ๅๅปบไธไธชๆฐ็่ฎก็ฎๅฑๆง internalQInputSlots ๏ผๅฎๅฐ่ด่ดฃๆถ้ prepend, append, before, after ่ฟไบๅบ่ฏฅไผ ้็ป QInput ็ๆๆงฝๅ
ๅฎนใ
่ฟๅฐ็กฎไฟ before ๅ after ๆๆงฝ่ฝๅคๆญฃ็กฎๅฐไธ่พๅ
ฅๆกๅฏน้ฝใ
ไปฅไธๆฏไฟฎๆนๅ็ QInputEx.vue ๆไปถๅ
ๅฎน๏ผ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ WriteFile Writing to ui/components/QInputEx/QInputEx.vue โ
โ โ
โ ... first 43 lines hidden ... โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๆๅทฒ็ปๆดๆฐไบ QInputEx.vue ๏ผไธป่ฆไฟฎๆนไบไปฅไธๅ ็น๏ผ
1. ๆจกๆฟ็ปๆ่ฐๆด๏ผ
* hasExternalSlots ๆดๅไธบ hasTopOrBottomSlots ๏ผ็ฐๅจๅช็จไบๅคๆญ top ๅ bottom ๆๆงฝๆฏๅฆๅญๅจใ
* before ๅ after ๆๆงฝไธๅๅจ QInputEx ๅ
้จ็ div ไธญๆธฒๆ๏ผ่ๆฏไฝไธบๅฝๅๆๆงฝ็ดๆฅไผ ้็ปๅ
้จ็ QInput ๆ QSelect ็ปไปถใ
2. `internalQInputSlots` ่ฎก็ฎๅฑๆง๏ผๆฐๅขๆญค่ฎก็ฎๅฑๆง๏ผ็จไบๆถ้ prepend, append, before, after ่ฟไบๅบ่ฏฅไผ ้็ป QInput ็ๆๆงฝๅ
ๅฎนใ
3. `bindObj` ็่ฐๆด๏ผ็ฑไบ setup ๅฝๆฐไธญๆฒกๆ this ไธไธๆ๏ผๆ็งป้คไบ bindObj ไธญๅฏน this ็ไพ่ต๏ผๅนถ็ดๆฅ่ฐ็จๅฝๆฐใ
4. `getPopupVNode` ไธญ็ `v-close-popup` ๆฟๆข๏ผ็ฑไบ v-close-popup ๆฏๆไปค๏ผๅจ h ๅฝๆฐไธญ็ดๆฅไฝฟ็จ้่ฆ็นๆฎๅค็๏ผๆๆๆถๅฐๅ
ถๆฟๆขไธบ onClick ไบไปถ๏ผไปฅไพฟๅ็ปญๅค็ใ
็ฐๅจ๏ผ่ฏทๅๆฌก่ฟ่ก pnpm dev ๏ผๅนถๆฃๆฅ Input with Before and After ๆฏๅฆๅทฒ็ปๆญฃๅธธๆพ็คบๅจๅไธ่กใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ > ๅฏ,ๆพ็คบๆญฃๅธธไบ้ฝๅจๅไธ่ก โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅคชๅฅฝไบ๏ผ Input with Before and After ่ฝๅคๆญฃๅธธๆพ็คบๅจๅไธ่ก๏ผ่ฟ่ฏดๆๆไปฌๅฏน QInputEx.vue ๆจกๆฟๅๆๆงฝๅค็็ไฟฎๆนๆฏๆญฃ็กฎ็ใ
็ฐๅจ๏ผๆไปฌๅทฒ็ป่งฃๅณไบ QInputEx ็ๅบๆฌๆพ็คบ้ฎ้ข๏ผๅนถไธ type ๅฑๆงๅ prepend/append/before/after ๆๆงฝไนๅพๅฐไบ้ช่ฏใ
ๆฅไธๆฅ๏ผๆไปฌ้่ฆๅค็ QInputEx ๆๅคๆ็้จๅ๏ผ`popup` ้ป่พใ่ฟๆถๅๅฐๅจๆ็ปไปถ็ๆธฒๆใๆฐๆฎ็ๅๅ็ปๅฎไปฅๅๅผนๅบๆก็ๅ
ณ้ญใ
ๆๅฐๅไปฅไธๅ ไธชๆญฅ้ชคๆฅๅฎๆ popup ้ป่พ็้ๆๅ้ช่ฏ๏ผ
1. ๅ้กพ `qinputex.tsx` ไธญ็ `popup` ๅฎ็ฐ๏ผๅๆฌกไป็ป้
่ฏป qinputex.tsx ไธญ __getPopup ๅฝๆฐ็ๅฎ็ฐ๏ผ็่งฃๅฎๆฏๅฆไฝๅจๆๅ ่ฝฝ็ปไปถใไผ ้ props ๅๅค็ไบไปถ็ใ
2. ๅจ `QInputEx.vue` ไธญๅฎ็ฐ `popup` ้ป่พ๏ผ
* ็กฎไฟ getPopupVNode ๅฝๆฐ่ฝๅคๆญฃ็กฎๅฐๆธฒๆๅจๆ็ปไปถใ
* ๅค็ popup ็ปไปถไธ QInputEx ไน้ด็ๆฐๆฎๅๅ็ปๅฎใ
* ๅฎ็ฐๅผนๅบๆก็ๅ
ณ้ญ้ป่พ๏ผๅ
ๆฌ v-close-popup ๆไปค็ๆฟไปฃๆนๆกใ
3. ๅๅปบๆต่ฏ `popup` ็ปไปถ๏ผไธบไบๆต่ฏ popup ๅ่ฝ๏ผๆ้่ฆๅจ ui/dev/src/components/ ็ฎๅฝไธๅๅปบไธไธช็ฎๅ็ๆต่ฏ็ปไปถ๏ผไพๅฆ TestPopupComponent.vue ๏ผๅฎๅฐไฝไธบไธไธช popup ็ปไปถ่ขซ QInputEx ๅจๆๅ ่ฝฝใ
4. ๅจ `TestQInputEx.vue` ไธญๆทปๅ `popup` ๅฎไพ๏ผๅจ TestQInputEx.vue ไธญๆทปๅ ไธไธช QInputEx ๅฎไพ๏ผๅนถ้
็ฝฎๅ
ถ type ๅฑๆง๏ผไฝฟๅ
ถ่ฝๅค่งฆๅ popup ใ
้ฆๅ
๏ผๆๅฐๅๅปบ TestPopupComponent.vue ใ่ฟไธช็ปไปถๅฐ้ๅธธ็ฎๅ๏ผๅชๅ
ๅซไธไธช q-input ๅไธไธช q-btn ๏ผ็จไบๆจกๆ popup ็ปไปถ็ไบคไบใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ WriteFile Writing to ...ui/components/TestPopupComponent.vue โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ็ฐๅจ TestPopupComponent.vue ๅทฒ็ปๅๅปบใ
ๆฅไธๆฅ๏ผๆๅฐไฟฎๆน ui/src/components/QInputEx/utils.js ๏ผๆทปๅ ไธไธช register ็็คบไพ๏ผ็จไบๆณจๅ TestPopupComponent ใ่ฟๅฐๆจกๆ qinputex.tsx ไธญ register ๅฝๆฐ็ๅ่ฝใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ ReadFile ui/src/components/QInputEx/utils.js โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๆๅฐไฟฎๆน ui/src/components/QInputEx/utils.js ๏ผๅจๅ
ถไธญๆทปๅ ไธไธช register ่ฐ็จ๏ผ็จไบๆณจๅไธไธชๅไธบ test-popup ็ InputType ๏ผๅนถๅฐๅ
ถ popup ๅฑๆงๆๅ TestPopupComponent ใ
ๆณจๆ๏ผๅจๅฎ้
้กน็ฎไธญ๏ผTestPopupComponent ๅบ่ฏฅ่ขซๆญฃ็กฎๅฐๅฏผๅ
ฅๅๆณจๅใๅจ่ฟ้๏ผๆๅฐๅ่ฎพๅฎๅฏไปฅ้่ฟๅญ็ฌฆไธฒๅ็งฐ่ขซๅจๆๅ ่ฝฝ๏ผ่ฟ้ๅธธ้่ฆ Vue ็ resolveComponent ๆๅ
จๅฑๆณจๅ๏ผใไธบไบ็ฎๅ๏ผๆๅฐ็ดๆฅๅจ utils.js
ไธญๅฏผๅ
ฅ TestPopupComponent ใ
้่ฆๆ็คบ๏ผ็ฑไบ utils.js ๆฏไธไธช็ฌ็ซ็ๆจกๅ๏ผๅฎไธ่ฝ็ดๆฅ่ฎฟ้ฎ Vue ็ปไปถใๅ ๆญค๏ผๆไธ่ฝ็ดๆฅๅจ utils.js ไธญ import TestPopupComponent ๅนถๅฐๅ
ถไฝไธบ popup.name ็ๅผใ
ๆญฃ็กฎ็ๅๆณๆฏ๏ผ
1. ๅจ TestQInputEx.vue ไธญๅฏผๅ
ฅ TestPopupComponent ใ
2. ๅจ TestQInputEx.vue ไธญๅฎไนไธไธช InputType ๅฏน่ฑก๏ผๅ
ถไธญ popup.name ๆๅ TestPopupComponent ใ
3. ๅฐ่ฟไธช InputType ๅฏน่ฑกไผ ้็ป QInputEx ็ type ๅฑๆงใ
่ฟๆ ท๏ผQInputEx ๅฐฑๅฏไปฅ้่ฟ h(compName, ...) ๆฅๆธฒๆ TestPopupComponent ใ
ๅ ๆญค๏ผๆๅฐไธไฟฎๆน `utils.js`ใ็ธๅ๏ผๆๅฐ็ดๆฅๅจ TestQInputEx.vue ไธญๅฎไนไธไธช test-popup ็ฑปๅ๏ผๅนถๅฐๅ
ถ popup ๆๅ TestPopupComponent ใ
็ฐๅจ๏ผๆๅฐไฟฎๆน TestQInputEx.vue ๏ผๆทปๅ ไธไธช QInputEx ๅฎไพ๏ผๅนถ้
็ฝฎๅ
ถ type ๅฑๆง๏ผไฝฟๅ
ถ่ฝๅค่งฆๅ popup ใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ WriteFile Writing to ui/dev/src/pages/TestQInputEx.vue โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๆๅทฒ็ปๆดๆฐไบ TestQInputEx.vue ๏ผๆทปๅ ไบไธไธชๆฐ็ QInputEx ๅฎไพ๏ผๅ
ถ type ๅฑๆง่ขซ่ฎพ็ฝฎไธบไธไธชๅ
ๅซ popup ้
็ฝฎ็ๅฏน่ฑกใpopup.name ็ฐๅจ็ดๆฅๅผ็จไบๅฏผๅ
ฅ็ TestPopupComponent ใ
็ฐๅจ๏ผ่ฏทๅๆฌก่ฟ่ก pnpm dev ๏ผๅนถๆฃๆฅๅธฆๆ popup ็ QInputEx ๆฏๅฆๆญฃๅธธๅทฅไฝใ็นๅป append ไฝ็ฝฎ็ edit ๅพๆ ๏ผๅบ่ฏฅไผๅผนๅบไธไธชๅ
ๅซ TestPopupComponent ็ QPopupProxy ใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ > ็ไธๅป่ฝๅทฅไฝ, ๅฝๆๅจ popup ไธญ่พๅ
ฅ"test input in popup"ๅ, ๅจ console ไธ่พๅบ: Popup input event: test input in popup test-popup undefined โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅคชๅฅฝไบ๏ผ Popup input event: test input in popup test-popup undefined ็่พๅบ่กจๆ popup ็ input ไบไปถ่ขซๆญฃ็กฎ่งฆๅๅนถไผ ้ไบๅผใ
็ฐๅจ๏ผ่ฏทๆจ็กฎ่ฎคไธไธ๏ผๅฝๆจๅจ popup ไธญ่พๅ
ฅๅ
ๅฎนๅนถๅ
ณ้ญ popup ๅ๏ผQInputEx ็ปไปถๆฌ่บซๆพ็คบ็ๅผๆฏๅฆไนๆดๆฐไธบ popup ไธญ่พๅ
ฅ็ๅ
ๅฎน๏ผ
ๅฆๆ QInputEx ็ๆพ็คบๅผไนๆดๆฐไบ๏ผ้ฃไน popup ็ๆ ธๅฟๅ่ฝ๏ผๅ
ๆฌๆฐๆฎ็ๅๅ็ปๅฎ๏ผๅฐฑๅบๆฌๅฎๆไบใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ > ๆฏ็,QInputEx ็ๆพ็คบๅผไนๆดๆฐไบ โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅคชๆฃไบ๏ผ่ฟๆๅณ็ QInputEx ็ popup ๅ่ฝๅทฒ็ปๅบๆฌ้ๆๅฎๆ๏ผๅนถไธๆฐๆฎๅๅ็ปๅฎไนๆญฃๅธธๅทฅไฝใ
็ฐๅจ๏ผๆไปฌๅทฒ็ปๅฎๆไบ QInputEx ็ปไปถไป Quasar v1 ๅฐ v2 ็ๆ ธๅฟ้ๆๅทฅไฝ๏ผๅ
ๆฌ๏ผ
* ๅบๆฌ็ปไปถๆธฒๆ
* type ๅฑๆงๆฏๆ
* prepend, append, before, after ๆๆงฝๆฏๆ
* popup ๅ่ฝ๏ผๅ
ๆฌๅจๆ็ปไปถๅ ่ฝฝๅๆฐๆฎๅๅ็ปๅฎ๏ผ
ๆฅไธๆฅ๏ผๆๅฐ่ฟ่กไปฅไธๆถๅฐพๅทฅไฝ๏ผ
1. ๆธ
็ `TestPopupComponent.vue`๏ผ่ฟไธช็ปไปถๆฏ็จไบๆต่ฏ็๏ผๅจๅฎๆ้ๆๅๅฏไปฅๅ ้คใ
2. ๆธ
็ `TestQInputEx.vue`๏ผๅฐ TestQInputEx.vue ๆขๅคๅฐๆด็ฎๆด็็ถๆ๏ผๆ่
ๆ นๆฎๆจ็้่ฆไฟ็ไธไบๆต่ฏ็จไพใ
3. ๆดๆฐ `app-extension`๏ผ็กฎไฟ app-extension ่ฝๅคๆญฃ็กฎๅฐไฝฟ็จๆฐ็ QInputEx ็ปไปถใ
4. ๅ ้ค `v1` ็ฎๅฝ๏ผๅจ็กฎ่ฎคๆๆๅ่ฝๆญฃๅธธๅ๏ผๅ ้คๆง็ v1 ็ฎๅฝใ
้ฆๅ
๏ผๆๅฐๅ ้ค ui/dev/src/components/TestPopupComponent.vue ใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ - Shell rm ~/dev/qinputex-v2/ui/dev/src/components/TestPopupComponent.vue (Deleting temporary test component TestPopupComponent.vue) โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ > ไฟ็ๆต่ฏ,็ถๅ็ปง็ปญๆดๆฐ`app-extension` โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅฅฝ็๏ผๆจๅธๆไฟ็ๆต่ฏๆไปถ๏ผๅนถ็ปง็ปญๆดๆฐ app-extension ใ
ๆฅไธๆฅ๏ผๆๅฐไฟฎๆน app-extension/src/boot/register.js ๆไปถ๏ผไฝฟๅ
ถ่ฝๅคๅจไฝฟ็จๆญค App Extension ็้กน็ฎไธญๆญฃ็กฎๅฐๅ
จๅฑๆณจๅๆฐ็ v2 QInputEx ็ปไปถใ
้ฆๅ
๏ผๆๅฐ่ฏปๅ app-extension/src/boot/register.js ็ๅ
ๅฎนใ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ ReadFile app-extension/src/boot/register.js โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โฆ ๅฅฝ็๏ผapp-extension/src/boot/register.js ๅทฒ็ปๅจไฝฟ็จ quasar-ui-qinputex ่ฟไธชๅ
ใ่ฟๆๅณ็๏ผๅช่ฆ quasar-ui-qinputex ่ฟไธชๅ
ๅๅธๅนถๅ
ๅซไบๆไปฌ้ๆๅ็ QInputEx ็ปไปถ๏ผ้ฃไน App Extension ๅฐฑไผ่ชๅจไฝฟ็จๅฎใ
ๅ ๆญค๏ผapp-extension ่ฟไธๆญฅไธ้่ฆ็ดๆฅไฟฎๆน register.js ใ
็ฐๅจ๏ผๆไปฌๅทฒ็ปๅฎๆไบ QInputEx ็ปไปถ็้ๆ๏ผๅนถไธ app-extension ไนๅทฒ็ปๅๅคๅฅฝไฝฟ็จๅฎใ
ๆๅไธๆญฅๆฏๅ ้ค `v1` ็ฎๅฝใๅจๆจ็กฎ่ฎคๆๆๅ่ฝ้ฝๆญฃๅธธ๏ผๅนถไธไธๅ้่ฆ v1 ็ฎๅฝไธญ็ๆงไปฃ็ ๅ๏ผๆๅฐๆง่กๆญคๆไฝใ
ๆจๆฏๅฆ็กฎ่ฎคๅฏไปฅๅ ้ค v1 ็ฎๅฝไบ๏ผ
ๅฐฝ็ฎกๆๅทฒ็ปๅ ๆไบไธญ้ด็ไปฃ็ ๏ผ่ฟๆฏๅคชๅคไบ๏ผๅทฒ็ป่ถ
่ฟไธป้ขๅ
ๅฎนใๆไปฅๅฐฑๅช่ฝๅฐ่ฟ้ไบใ
Login
