mirror of https://github.com/vuejs/vitepress
commit
94ca447ff4
@ -0,0 +1,80 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
const showModal = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button class="modal-button" @click="showModal = true">
|
||||||
|
Показать модальное окно
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<Teleport to="body">
|
||||||
|
<Transition name="modal">
|
||||||
|
<div v-show="showModal" class="modal-mask">
|
||||||
|
<div class="modal-container">
|
||||||
|
<p>Привет из модального окна!</p>
|
||||||
|
<div class="model-footer">
|
||||||
|
<button class="modal-button" @click="showModal = false">
|
||||||
|
Закрыть
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</Teleport>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.modal-mask {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 200;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
width: 300px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 20px 30px;
|
||||||
|
background-color: var(--vp-c-bg);
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-footer {
|
||||||
|
margin-top: 8px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-button {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-color: var(--vp-button-alt-border);
|
||||||
|
color: var(--vp-button-alt-text);
|
||||||
|
background-color: var(--vp-button-alt-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-button:hover {
|
||||||
|
border-color: var(--vp-button-alt-hover-border);
|
||||||
|
color: var(--vp-button-alt-hover-text);
|
||||||
|
background-color: var(--vp-button-alt-hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-enter-from,
|
||||||
|
.modal-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-enter-from .modal-container,
|
||||||
|
.modal-leave-to .modal-container {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,43 @@
|
|||||||
|
# Предыдущая и следующая страницы {#prev-next-links}
|
||||||
|
|
||||||
|
Вы можете настроить текст и ссылку для предыдущей и следующей страниц (отображаются в нижней части страницы). Это полезно, если вы хотите, чтобы текст отличался от того, что находится в сайдбаре. Кроме того, вы можете счесть полезным отключить подвал или ссылку на страницу, которая не включена в сайдбар.
|
||||||
|
|
||||||
|
## prev {#prev}
|
||||||
|
|
||||||
|
- Тип: `string | false | { text?: string; link?: string }`
|
||||||
|
|
||||||
|
- Подробности:
|
||||||
|
|
||||||
|
Указывает текст/ссылку, который должен отображаться при переходе на предыдущую страницу. Если вы не зададите это в метаданных, текст/ссылка будет определяться из конфигурации сайдбара.
|
||||||
|
|
||||||
|
- Примеры:
|
||||||
|
|
||||||
|
- Для настройки только текста:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
prev: 'Начать | Markdown'
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
- Для настройки текста и ссылки:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
prev:
|
||||||
|
text: 'Markdown'
|
||||||
|
link: '/guide/markdown'
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
- Для скрытия предыдущей страницы:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
prev: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
## next {#next}
|
||||||
|
|
||||||
|
Аналогично параметру `prev`, но для следующей страницы.
|
@ -0,0 +1,34 @@
|
|||||||
|
/**
|
||||||
|
* vue-demi v0.14.7
|
||||||
|
* Copyright (c) 2020-present, Anthony Fu
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
import * as Vue from 'vue'
|
||||||
|
|
||||||
|
var isVue2 = false
|
||||||
|
var isVue3 = true
|
||||||
|
var Vue2 = undefined
|
||||||
|
|
||||||
|
function install() {}
|
||||||
|
|
||||||
|
export function set(target, key, val) {
|
||||||
|
if (Array.isArray(target)) {
|
||||||
|
target.length = Math.max(target.length, key)
|
||||||
|
target.splice(key, 1, val)
|
||||||
|
return val
|
||||||
|
}
|
||||||
|
target[key] = val
|
||||||
|
return val
|
||||||
|
}
|
||||||
|
|
||||||
|
export function del(target, key) {
|
||||||
|
if (Array.isArray(target)) {
|
||||||
|
target.splice(key, 1)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
delete target[key]
|
||||||
|
}
|
||||||
|
|
||||||
|
export * from 'vue'
|
||||||
|
export { Vue, Vue2, isVue2, isVue3, install }
|
@ -0,0 +1,13 @@
|
|||||||
|
diff --git a/package.json b/package.json
|
||||||
|
index 3b3cdfc4427a1a64fdd3b37604a7174e4646e423..afaea16b115554fcf15a905642562e881ece7ca6 100644
|
||||||
|
--- a/package.json
|
||||||
|
+++ b/package.json
|
||||||
|
@@ -27,7 +27,7 @@
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"main": "",
|
||||||
|
- "types": "index.d.ts",
|
||||||
|
+ "types": "index.d.mts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./index.d.mts",
|
@ -0,0 +1,29 @@
|
|||||||
|
diff --git a/types/index.d.ts b/types/index.d.ts
|
||||||
|
index 7c94aae194faa66ca006ace98cdb0dee82a3e471..0377cace7c4a9653d4ecf963babffd4bd68494b0 100644
|
||||||
|
--- a/types/index.d.ts
|
||||||
|
+++ b/types/index.d.ts
|
||||||
|
@@ -1,10 +1,10 @@
|
||||||
|
-import MarkdownIt = require('markdown-it');
|
||||||
|
-import Token = require('markdown-it/lib/token');
|
||||||
|
-import State = require('markdown-it/lib/rules_core/state_core');
|
||||||
|
+import MarkdownIt from 'markdown-it';
|
||||||
|
+import Token from 'markdown-it/lib/token.mjs';
|
||||||
|
+import StateCore from 'markdown-it/lib/rules_core/state_core.mjs';
|
||||||
|
|
||||||
|
declare namespace anchor {
|
||||||
|
- export type RenderHref = (slug: string, state: State) => string;
|
||||||
|
- export type RenderAttrs = (slug: string, state: State) => Record<string, string | number>;
|
||||||
|
+ export type RenderHref = (slug: string, state: StateCore) => string;
|
||||||
|
+ export type RenderAttrs = (slug: string, state: StateCore) => Record<string, string | number>;
|
||||||
|
|
||||||
|
export interface PermalinkOptions {
|
||||||
|
class?: string,
|
||||||
|
@@ -37,7 +37,7 @@ declare namespace anchor {
|
||||||
|
placement?: 'before' | 'after'
|
||||||
|
}
|
||||||
|
|
||||||
|
- export type PermalinkGenerator = (slug: string, opts: PermalinkOptions, state: State, index: number) => void;
|
||||||
|
+ export type PermalinkGenerator = (slug: string, opts: PermalinkOptions, state: StateCore, index: number) => void;
|
||||||
|
|
||||||
|
export interface AnchorInfo {
|
||||||
|
slug: string;
|
File diff suppressed because it is too large
Load Diff
@ -1,12 +0,0 @@
|
|||||||
import { inBrowser } from '../../shared'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const hashRef = ref(inBrowser ? location.hash : '')
|
|
||||||
|
|
||||||
if (inBrowser) {
|
|
||||||
window.addEventListener('hashchange', () => {
|
|
||||||
hashRef.value = location.hash
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export { hashRef }
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue