createTemplatePromise
Promise 形式的模板。适用于构建自定义对话框、模态框、Toast 等。
警告
此函数仅适用于 Vue 3
示例
用法
vue
<script setup lang="ts">
import { createTemplatePromise } from '@vueuse/core'
const TemplatePromise = createTemplatePromise<ReturnType>()
async function open() {
const result = await TemplatePromise.start()
// button is clicked, result is 'ok'
}
</script>
<template>
<TemplatePromise v-slot="{ promise, resolve, reject, args }">
<!-- your UI -->
<button @click="resolve('ok')">
OK
</button>
</TemplatePromise>
</template>特性
- 程序化 - 以 Promise 形式调用你的 UI
- 模板 - 使用 Vue 模板渲染，而非新的 DSL
- TypeScript - 通过泛型类型实现完整的类型安全
- 无渲染 - 你可以完全控制 UI
- 过渡动画 - 支持 Vue 过渡动画
此函数从 vue-template-promise 迁移而来
用法
createTemplatePromise 返回一个 Vue 组件，你可以直接在带有 <script setup> 的模板中使用它
ts
import { createTemplatePromise } from '@vueuse/core'
const TemplatePromise = createTemplatePromise()
const MyPromise = createTemplatePromise<boolean>() // with generic typejs
import { createTemplatePromise } from '@vueuse/core'
const TemplatePromise = createTemplatePromise()
const MyPromise = createTemplatePromise() // with generic type在模板中，使用 v-slot 访问 Promise 和 resolve 函数。
vue
<template>
<TemplatePromise v-slot="{ promise, resolve, reject, args }">
<!-- you can have anything -->
<button @click="resolve('ok')">
OK
</button>
</TemplatePromise>
<MyPromise v-slot="{ promise, resolve, reject, args }">
<!-- another one -->
</MyPromise>
</template>插槽最初不会被渲染（类似于 v-if="false"），除非你从组件中调用 start 方法。
ts
const result = await TemplatePromise.start()一旦在模板中调用 resolve 或 reject，Promise 将会被 resolve 或 reject，并返回你传入的值。Promise resolve 后，插槽将自动移除。
传递参数
你可以使用参数将参数传递给 start。
ts
import { createTemplatePromise } from '@vueuse/core'
const TemplatePromise = createTemplatePromise<boolean, [string, number]>()js
import { createTemplatePromise } from '@vueuse/core'
const TemplatePromise = createTemplatePromise()ts
const result = await TemplatePromise.start('hello', 123) // Pr在模板插槽中，你可以通过 args 属性访问这些参数。
vue
<template>
<TemplatePromise v-slot="{ args, resolve }">
<div>{{ args[0] }}</div>
<!-- hello -->
<div>{{ args[1] }}</div>
<!-- 123 -->
<button @click="resolve(true)">
OK
</button>
</TemplatePromise>
</template>过渡动画
你可以使用 transition 来为插槽添加动画。
vue
<script setup lang="ts">
const TemplatePromise = createTemplatePromise<ReturnType>({
transition: {
name: 'fade',
appear: true,
},
})
</script>
<template>
<TemplatePromise v-slot="{ resolve }">
<!-- your UI -->
<button @click="resolve('ok')">
OK
</button>
</TemplatePromise>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>了解更多关于 Vue 过渡动画 的信息。
动机
以编程方式调用对话框或模态框的常见方法如下所示
ts
const dialog = useDialog()
const result = await dialog.open({
title: 'Hello',
content: 'World',
})这可以通过将这些信息发送到顶层组件并让其渲染对话框来实现。但是，这限制了你在 UI 中可以表达的灵活性。例如，你可能希望标题是红色的，或者有额外的按钮等等。最终你会得到很多像这样的选项
ts
const result = await dialog.open({
title: 'Hello',
titleClass: 'text-red',
content: 'World',
contentClass: 'text-blue text-sm',
buttons: [
{ text: 'OK', class: 'bg-red', onClick: () => {} },
{ text: 'Cancel', class: 'bg-blue', onClick: () => {} },
],
// ...
})即使这样也不够灵活。如果你想要更多，你最终可能会使用手动渲染函数。
ts
const result = await dialog.open({
title: 'Hello',
contentSlot: () => h(MyComponent, { content }),
})这就像在脚本中重新发明一种新的 DSL 来表达 UI 模板。
因此，此函数允许在模板中表达 UI 而不是在脚本中（这才是它应该在的地方），同时仍然能够以编程方式进行操作。
类型声明
显示类型声明
typescript
export interface TemplatePromiseProps<Return, Args extends any[] = []> {
/**
* The promise instance.
*/
promise: Promise<Return> | undefined
/**
* Resolve the promise.
*/
resolve: (v: Return | Promise<Return>) => void
/**
* Reject the promise.
*/
reject: (v: any) => void
/**
* Arguments passed to TemplatePromise.start()
*/
args: Args
/**
* Indicates if the promise is resolving.
* When passing another promise to `resolve`, this will be set to `true` until the promise is resolved.
*/
isResolving: boolean
/**
* Options passed to createTemplatePromise()
*/
options: TemplatePromiseOptions
/**
* Unique key for list rendering.
*/
key: number
}
export interface TemplatePromiseOptions {
/**
* Determines if the promise can be called only once at a time.
*
* @default false
*/
singleton?: boolean
/**
* Transition props for the promise.
*/
transition?: TransitionGroupProps
}
export type TemplatePromise<
Return,
Args extends any[] = [],
> = DefineComponent<object> & {
new (): {
$slots: {
default: (_: TemplatePromiseProps<Return, Args>) => any
}
}
} & {
start: (...args: Args) => Promise<Return>
}
/**
* Creates a template promise component.
*
* @see https://vueuse.org.cn/createTemplatePromise
*/
export declare function createTemplatePromise<Return, Args extends any[] = []>(
options?: TemplatePromiseOptions,
): TemplatePromise<Return, Args>源码
贡献者
Anthony Fu
Anthony Fu
Aaron-zon
Haoqun Jiang
Bruce