![[筆記] 篩選可用的時間區段 – 思路與邏輯](https://smlpoints.com/wp-content/uploads/notes-vue-2-with-typescript-1.png "[筆記] 篩選可用的時間區段 – 思路與邏輯")
[筆記] 篩選可用的時間區段 – 思路與邏輯
這回在業務上會需要依據場地是否有無被預約，進而顯示可用的開始時間和結束時間。這邊筆記下一些邏輯上的細節。 內容 注意事項 1. 日期的格式，會影響到 dayjs Read More …
標籤: vue3
![[筆記] Vue3 在 vue 檔案以外的地方使用 vue-i18n](https://smlpoints.com/wp-content/uploads/notes-vuejs-node-js-initialize-projects-1.jpg "[筆記] Vue3 在 vue 檔案以外的地方使用 vue-i18n")
[筆記] Vue3 在 vue 檔案以外的地方使用 vue-i18n
Vue3 的 vue-18n 若要在 .vue 的以外部分來執行，是不可使用 composable 方法來取得的，而是要從原始的 i18n Instance 來 Read More …
![[筆記] 2024 從 Jest 轉移到 Vitest 過程筆記](https://smlpoints.com/wp-content/uploads/notes-2024-from-jest-to-vitest-1-200x200.jpg "[筆記] 2024 從 Jest 轉移到 Vitest 過程筆記")
[筆記] 2024 從 Jest 轉移到 Vitest 過程筆記
近期為了解決 import.meta 無法順利使用 Jest 來進行單元測試的問題，於是改用 vite 為基底並盡可能相容 Jest 語法的 vitest。轉移 Read More …
![[筆記] ESLint 8 → Eslint 9 升級指南 以 Vue3 + TypeScript + Prettier 為例](https://smlpoints.com/wp-content/uploads/notes-eslint-8-eslint-9-vue3-typescript-prettier-upgrade-1-200x200.jpg "[筆記] ESLint 8 → Eslint 9 升級指南 以 Vue3 + TypeScript + Prettier 為例")
[筆記] ESLint 8 → Eslint 9 升級指南 以 Vue3 + TypeScript + Prettier 為例
ESLint 9 於 2024 年春迎來了一次重大的版本更新，將過往的巢狀設定風格變為扁平化。因此過往常互相衝突的 eslint 與 prettier 也終於可 Read More …
![[筆記] Vueform Vue3 Multiselect 封裝](https://smlpoints.com/wp-content/uploads/notes-vueform-3-multiselect-1-200x200.jpg "[筆記] Vueform Vue3 Multiselect 封裝")
[筆記] Vueform Vue3 Multiselect 封裝
這邊分享 Vue3 版本的 Vueform 所提供的 MultiSelect 的封裝方式。多虧於原始的 TypeScript 的型別已經規劃的相當完善，所以難度 Read More …
![[筆記] HTML Vue3 Click Outside 實作與誤區](https://smlpoints.com/wp-content/uploads/notes-html5-input-time-format-1.jpg "[筆記] HTML Vue3 Click Outside 實作與誤區")
[筆記] HTML Vue3 Click Outside 實作與誤區
實務上要實作 Click Outside，多半都是將監聽器綁在 window 上，或是透過 Event 事件的 ComposePath() 方法來進行過濾，進而 Read More …
![[筆記] 利用 Popper.js 下一代 Floating UI 撰寫 Tooltip 元件 – Vue3 & Jest](https://smlpoints.com/wp-content/uploads/notes-popper-js-floating-ui-tooltip-component-vue3-jest-1-200x200.jpg "[筆記] 利用 Popper.js 下一代 Floating UI 撰寫 Tooltip 元件 – Vue3 & Jest")
[筆記] 利用 Popper.js 下一代 Floating UI 撰寫 Tooltip 元件 – Vue3 & Jest
因過往的專案有使用到老牌的 popper.js 套件，想在新版複刻時發現其 2.0 版 – Floating UI 已上線一段時間。這邊感謝 Nat Read More …
![[筆記] Tailwind CSS Safelist 設定](https://smlpoints.com/wp-content/uploads/notes-tailwind-css-3-set-developing-environment.png "[筆記] Tailwind CSS Safelist 設定")
[筆記] Tailwind CSS Safelist 設定
這邊筆記下若用 Vue3 搭配 TailwindCSS 使用時，若用動態傳值來指定的 class – 像是顏色代碼，那你會發現沒有作用。因為 Tai Read More …
![[筆記] Vue3 搭配原生 swiper js 進行使用](https://smlpoints.com/wp-content/uploads/notes-vue3-with-swiper-js-1-200x200.jpg "[筆記] Vue3 搭配原生 swiper js 進行使用")
[筆記] Vue3 搭配原生 swiper js 進行使用
Swiper.js 是很常被使用的開源幻燈片、跑馬燈效果工具，現今 2024 已經到第 11 版了。早期使用 Swiper.js 官方有特別開出 Swiper Read More …
