所以我說那個型別呢?來一個有形別提示的 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
留言分享你的想法!
avatar-img
鱈魚的魚缸
17會員
14內容數
各種鱈魚滾鍵盤的雜紀
鱈魚的魚缸的其他內容
2024/07/15
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
Thumbnail
2024/07/15
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
Thumbnail
2024/07/10
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
2024/07/10
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
2024/06/30
有時候使用 Pinia 會遇到資料意外變更問題,這其實不是鳳梨的錯,讓我們看看怎麼回事吧。( ´ ▽ ` )ノ
Thumbnail
2024/06/30
有時候使用 Pinia 會遇到資料意外變更問題,這其實不是鳳梨的錯,讓我們看看怎麼回事吧。( ´ ▽ ` )ノ
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
先前提到 Quasar 的 Dialog Plugin 很好用,再讓我補充一個用法。
Thumbnail
先前提到 Quasar 的 Dialog Plugin 很好用,再讓我補充一個用法。
Thumbnail
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
Thumbnail
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
Thumbnail
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
Swiper.js 是一個功能齊全的輪播套件,除了輪播外,也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成,此篇文章將介紹 Options API 的撰寫方式,以及如何做樣式客製化。
Thumbnail
Swiper.js 是一個功能齊全的輪播套件,除了輪播外,也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成,此篇文章將介紹 Options API 的撰寫方式,以及如何做樣式客製化。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News