Skip to content

useTitle

类别
导出体积
912 B
上次更改
7 months ago

响应式的文档标题。

WARNING

这个可组合组件不兼容 SSR。

示例

用法

ts
import { 
useTitle
} from '@vueuse/core'
const
title
=
useTitle
()
console
.
log
(
title
.
value
) // 打印当前标题
title
.
value
= 'Hello' // 更改当前标题

立即设置初始标题:

ts
const 
title
=
useTitle
('New Title')

传递一个 ref,当源 ref 发生变化时,标题将被更新:

ts
import { 
useTitle
} from '@vueuse/core'
import {
shallowRef
} from 'vue'
const
messages
=
shallowRef
(0)
const
title
=
computed
(() => {
return !
messages
.
value
? 'No message' : `${
messages
.
value
} new messages`
})
useTitle
(
title
) // 文档标题将与 ref "title" 匹配

传递一个可选的模板标记 Vue Meta Title Template 来更新要注入到该模板中的标题:

ts
const 
title
=
useTitle
('New Title', {
titleTemplate
: '%s | My Awesome Website'
})

WARNING

observetitleTemplate 不兼容。

类型声明

显示类型声明
ts
export type 
UseTitleOptionsBase
= {
/** * 在组件卸载时恢复原始标题 * @param originTitle 原始标题 * @returns 恢复的标题 */
restoreOnUnmount
?:
| false | ((
originalTitle
: string,
currentTitle
: string,
) => string | null | undefined) } & ( | { /** * 使用 MutationObserve 观察 `document.title` 的变化 * 不能与 `titleTemplate` 选项一起使用。 * * @default false */
observe
?: boolean
} | { /** * 用于解析标题的模板字符串(例如,'%s | My Website') * 不能与 `observe` 选项一起使用。 * * @default '%s' */
titleTemplate
?:
MaybeRef
<string> | ((
title
: string) => string)
} ) export type
UseTitleOptions
=
ConfigurableDocument
&
UseTitleOptionsBase
/** * 响应式 document title. * * @see https://vueuse.org/useTitle * @param newTitle * @param options * @description It's not SSR compatible. Your value will be applied only on client-side. */ export declare function
useTitle
(
newTitle
:
ReadonlyRefOrGetter
<string | null | undefined>,
options
?:
UseTitleOptions
,
):
ComputedRef
<string | null | undefined>
export declare function
useTitle
(
newTitle
?:
MaybeRef
<string | null | undefined>,
options
?:
UseTitleOptions
,
):
Ref
<string | null | undefined>
export type
UseTitleReturn
=
ReturnType
<typeof
useTitle
>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
IlyaL
Anthony Fu
Alex Kozack
Antério Vieira
NoiseFan
SerKo
Yauheni Vasiukevich
Robin
Doctorwu
ClemDee
Eugen Istoc
Levi (Nguyễn Lương Huy)
Preetesh Jain
Michael Roberts

更新日志

7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
0ab76 - feat: restore title on unmounted (#3570)