所以我說那個型別呢?來一個有形別提示的 Vue h function 吧!(/≧▽≦)/

鱈魚-avatar-img
發佈於Vue
更新於 發佈於 閱讀時間約 6 分鐘
鱈魚的魚缸搬家了!新家文章皆有重新修訂,歡迎來新家看看喔。(´▽`ʃ♡ƪ)
raw-image

先前提到 Quasar 的 Dialog Plugin 很好用,再讓我補充一個用法。


有時候會希望可以點擊圖片時將圖片最大化呈現,這個需求如果要簡單實現,可以使用 QDialog 實作。

最直接的做法應該是點擊指定圖片時,將圖片的 src 存起來,再將 dialog 的顯示狀態改為 true,讓 Dialog 開啟。


其實你可以直接使用 $q.dialog 配合 h function 簡單完成。

<script setup lang="ts">
import { useQuasar, QDialog, QImg } from 'quasar';
import { h } from 'vue';

const $q = useQuasar();

/** 將 QImg 使用 QDialog 包起來後,使用 $q.dialog 開啟 */
function openImgWithDialog(src: string) {
$q.dialog({
component: h(
QDialog,
undefined,
{ default: () => h(QImg, { src }) }
)
});
}

</script>

<template>
<div class="fit flex flex-col gap-4">
<q-img class="w-[20rem] h-[15rem]" src="<https://live.staticflickr.com/4325/35716212880_217fa28b46_k.jpg>"
@click="openImgWithDialog('<https://live.staticflickr.com/4325/35716212880_217fa28b46_k.jpg>')" />
</div>
</template>

這樣就可以簡單快速的利用 Dialog 開啟圖片了,完全不會有額外的 template 與變數!♪( ◜ω◝و(و

(不過如果要複雜的互動,例如縮放平移等等,當然還是要包個專用元件處理。)


當然不只有 QImg,想用其他元件也行,概念都一樣。◝( •ω• )◟

不過這裡稍微有個小小的困擾,就是 h function 不會提示元件的參數,給錯或是參數改了都不知道。…(›´ω`‹ )

讓我們建立一個有元件參數提示的 h function 吧!(/≧▽≦)/


第一步是建立協助抽取 Vue 元件型別的實用 function。

types/index.ts

import { DefineComponent, Slot } from 'vue';

/** 提取 Vue Component 之內部 props
*
* 會將 style、class、event 全部取出來
*/
export type ExtractComponentProps<Comp> = Comp extends new () => {
$props: infer P;
}
? P
: never;

/** 提取 Vue Component slots */
export type ExtractComponentSlots<Comp> = Comp extends new (...args: any) => {
$slots?: infer S
}
? (S extends Slot ? Parameters<S>[0]
: {}
) : {};


接著新增 typedH function。

common/utils.ts

import { Component, h } from 'vue';
import { ExtractComponentProps, ExtractComponentSlots } from '../types';

/** 元件繼承參數
*
* [文檔](<https://cn.vuejs.org/guide/components/attrs.html#fallthrough-attributes>)
*/
export interface InheritAttr {
class?: string;
style?: Record<string, string>;
/** 為了讓範例精簡,這裡只列出 click,可以自行追加基礎事件 */
onClick?: (event: MouseEvent) => void;
}

/** Veu h function 有型別推導的版本
*
* [何謂 h function](<https://cn.vuejs.org/guide/extras/render-function.html>)
*
* @param component Vue SFC 元件或 html tag 名稱
* @param props SFC 內所有參數,包含 class、style、event 等等
* @param slots SFC 插槽
*/
export function typedH(
component: string,
props?: string,
): ReturnType<typeof h>
export function typedH<Comp extends Component>(
component: string,
props?: InheritAttr,
slots?: ExtractComponentSlots<Comp>,
): ReturnType<typeof h>
export function typedH<Comp extends Component>(
component: Comp,
props?: ExtractComponentProps<Comp> & InheritAttr,
slots?: ExtractComponentSlots<Comp>,
): ReturnType<typeof h>
export function typedH(
component: any,
props?: any,
slots?: any,
) {
if (!slots) {
return h(component, props);
}
return h(component, props, slots);
}


用法與原本的 h function 一模一樣,現在我們有型別提示了!✧*。٩(ˊᗜˋ*)و✧*。

就這樣,其實也不是甚麼神奇的東西。(´,,•ω•,,)


範例程式在此,大家下次見。( ´ ▽ ` )ノ

avatar-img
17會員
14內容數
各種鱈魚滾鍵盤的雜紀
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
鱈魚的魚缸 的其他內容
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
有時候使用 Pinia 會遇到資料意外變更問題,這其實不是鳳梨的錯,讓我們看看怎麼回事吧。( ´ ▽ ` )ノ
到底要用 ref 還是 reactive 是一個很常見的問題,不過現在官方文檔推薦使用 ref 就行,所以也不是甚麼大問題就是了。( •̀ ω •́ )✧ 所以 reactive 真的沒用用途了嗎?這篇文章來記錄一下 reactive 的用法。
watch 不是不能用,而是在使用 watch 之前,先想想有沒有其他方案,真的沒有才用 watch。 千萬不要為了一時方便讓元件裡滿滿的 watch,因為容易產生難以追蹤的副作用,會讓資料流更加複雜。
如果 watch 沒有放在元件最外層,可能會導致元件 onUnmounted 後watch不會自動解除,至於該怎麼辦,就讓我們娓娓道來。( ´ ▽ ` )ノ
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
有時候使用 Pinia 會遇到資料意外變更問題,這其實不是鳳梨的錯,讓我們看看怎麼回事吧。( ´ ▽ ` )ノ
到底要用 ref 還是 reactive 是一個很常見的問題,不過現在官方文檔推薦使用 ref 就行,所以也不是甚麼大問題就是了。( •̀ ω •́ )✧ 所以 reactive 真的沒用用途了嗎?這篇文章來記錄一下 reactive 的用法。
watch 不是不能用,而是在使用 watch 之前,先想想有沒有其他方案,真的沒有才用 watch。 千萬不要為了一時方便讓元件裡滿滿的 watch,因為容易產生難以追蹤的副作用,會讓資料流更加複雜。
如果 watch 沒有放在元件最外層,可能會導致元件 onUnmounted 後watch不會自動解除,至於該怎麼辦,就讓我們娓娓道來。( ´ ▽ ` )ノ
你可能也想看
Google News 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
這篇是我第一次在方格子發布的內容,開頭也有點不知道該怎麼起,就隨意打打當作閒聊了。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
這篇是我第一次在方格子發布的內容,開頭也有點不知道該怎麼起,就隨意打打當作閒聊了。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。