Hero Image
[元件] 把 attr、event、slot，直接 Passthrough 給子元件，製作包裝元件

用來複寫給專案用的元件，用於在既有 UI framework 上打造專案元件 Vue3 Vue2.6 <template> <q-btn v-bind="{ ...$attrs, ...$props }" v-on="$listeners"> <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"> <slot :name="slot" v-bind="scope"/> </template> <slot></slot> </q-btn> </template> Vue3 Vue3 裡面只要綁定 $attrs 即可，attrs, props, event 全部自動綁定進去。 <template> <q-btn v-bind="$attrs"> <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]> <slot :name="slot"></slot> </template> <slot></slot> </q-btn> </template> Quasar2-TS Quasar 裡面 Props, Slot 有獨立的 interface 定義，因此可直接拿到。 <template> <q-btn v-bind="$attrs"> <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]> <slot :name="slot"></slot> </template> </q-btn> </template> <script setup lang="ts"> import type { QBtnSlots, QBtnProps } from 'quasar'; import { QBtn } from 'quasar'; const props = withDefaults(defineProps<QBtnProps>(),{ // here comes default settings }); </script> <style scoped></style> Vuetify3 Vuetify3 裡面 Props, Slot 沒有獨立的 interface 定義，因此需額外定義。 MyBtn.

April 6, 2023 Read
Hero Image
[But] TypeScript 注意事項

用這樣的寫法，會造成 IDE 異常 :columns="columns as QTableProps['columns']"

March 10, 2023 Read
Hero Image
[元件] 全域元件

Vue 的作法 app.component('component-name', component) Quasar2 的做法 Vite/Typescript 建立 src/boot/register-my-component.ts import { boot } from 'quasar/wrappers'; import BasicBtnVue from 'src/components/BasicBtn.vue'; // "async" is optional; // more info on params: https://v2.quasar.dev/quasar-cli/boot-files export default boot(async ({ app }) => { app.component('x-btn', BasicBtnVue); }); 在 quasar.conf.js 內新增設定 module.exports = configure(function (/* ctx */) { return { // ...上略 // https://v2.quasar.dev/quasar-cli-vite/boot-files boot: ['i18n', 'register-my-component'], // ... 下略 }; }); 建立型別定義檔，我放在 src/components 下 components.d.ts import BasicBtn from '.

December 13, 2022 Read
Hero Image
[Typescript] Typescript 用 InjectionKey 達成強型別 provide

Working with Reactivity 上游元件 <script lang="ts"> import { InjectionKey, provide, Ref, reactive } from 'vue'; // State export interface IState { drawer: boolean; } export const stateKey: InjectionKey<Ref<IState>> = Symbol(); const state = reactive<IState>({ drawer: false, }); provide<IState>(stateKey, computed(()=>state)); </script> 下游元件 <script setup lang="ts"> import { inject, ref } from 'vue'; import { stateKey } from './Parent.vue'; const state = inject(stateKey, ref({ drawer: false })); </script> Reference Vue.js/guild - Provide / Inject Vue.

November 17, 2022 Read
Hero Image
[DIY] 設計一個可回傳 Promise 的 Dialog 元件方法

有用過 sweetalert2 的話，應該會喜歡可以同步等待對話框回傳值的方式， 這裡做一個 Vue2 元件，呼叫該元件的方法會彈出對話框等待使用者輸入，並且回傳 Promise， 如此一來就能夠在同一個函式當中處理使用者輸入值。 Dialog 元件設計原理: 元件方法 GetConfirm() 顯示 Dialog 元件並回傳一個 Promise，。 設置watcher讓元件取得使用者輸入後 resolve promise 得利於上述元件的設計，實際上的效益是將複雜度封裝到子元件裡面(watcher移動到元件內)， 如此不需在上層元件撰寫使用者輸入取值的監視邏輯， 讓我們得以在上層元件直接 await GetConfirm 同步取得值進行操作。 這個概念的用途非常廣，例如 Vue router 的 component route guard，在離開表單頁面前跳出使用者確認的 Dialog。 Vue3 實作 <template> <v-dialog v-model="dialog" v-bind="$attrs"> <slot v-bind="{ Resolve }"></slot> </v-dialog> </template> <script setup> import { ref } from "vue"; const dialog = ref(false); let resolve = null; const Resolve = (v) => { resolve(v); dialog.value = false; }; const GetResult = async () => { dialog.

August 26, 2022 Read
Hero Image
[DIY] Vue Router 使用 Navigation Guard 加入查詢參數

工作上需要把每一個路由都加上同一個 query string 第一直覺就是直接寫成這樣： router.beforeEach(async (to, from, next) => { next({ path: path, query: {...to.queryl ,token: tokenStr} }) }) 結果卻跳出 Maximum call stack size exceeded 的錯誤，判斷程式出現無窮迴圈： runtime.js?96cf:285 Uncaught (in promise) RangeError: Maximum call stack size exceeded 第一個反應是傻眼貓咪，為什麼 next() 不傳入參數的時候不會出現無窮迴圈，但塞進參數就會， 難道說 next() 在傳入參數與不傳入參數的行為並不相同！！ 因此去翻閱官網對 next() 的說明： next: Function: this function must be called to resolve the hook. The action depends on the arguments provided to next: next(): move on to the next hook in the pipeline.

August 19, 2021 Read
Hero Image
[DIY] 用 Render Function 打造靈活的 CheckBox 元件範例

情境1：要選取多個 ckeckbox 對應到資料庫的欄位，欄位值是一串YN代表某個選項是否有被選去，例如： YNNYYNNYYN 情境2：要選取多個 ckeckbox 對應到資料庫的欄位，欄位值只有一個，可能是任何字元，例如： 1 可以打造兩個元件，分別對應至單選、多選 單選元件 程式碼 (Code) Vue.component('x-ck-single', { props: { disabled: { type: Boolean, default: () => false }, // checkbox 的標記 [string] || [{text:string, value:any}] labels: { type: Array, default: () => ['Yes', 'No'] }, value: { default: () => null }, trueValue: { default: () => 'Y' }, falseValue: { default: () => 'N' }, inline: { type: Boolean, default: () => false }, }, data() { return { innervalue_: this.

July 29, 2021 Read