mirror of https://github.com/vuejs/core.git
workflow(sfc-playground): add reload function (#8674)
This commit is contained in:
parent
bb0c8899ca
commit
20ad475718
|
@ -18,6 +18,8 @@ if (import.meta.env.DEV) {
|
|||
)
|
||||
}
|
||||
|
||||
const replRef = ref<InstanceType<typeof Repl>>()
|
||||
|
||||
const setVH = () => {
|
||||
document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
|
||||
}
|
||||
|
@ -90,6 +92,10 @@ function toggleSSR() {
|
|||
store.setFiles(store.getFiles())
|
||||
}
|
||||
|
||||
function reloadPage() {
|
||||
replRef.value?.reload()
|
||||
}
|
||||
|
||||
const theme = ref<'dark' | 'light'>('dark')
|
||||
function toggleTheme(isDark: boolean) {
|
||||
theme.value = isDark ? 'dark' : 'light'
|
||||
|
@ -108,9 +114,11 @@ onMounted(() => {
|
|||
@toggle-theme="toggleTheme"
|
||||
@toggle-dev="toggleDevMode"
|
||||
@toggle-ssr="toggleSSR"
|
||||
@reload-page="reloadPage"
|
||||
/>
|
||||
<Repl
|
||||
v-if="EditorComponent"
|
||||
ref="replRef"
|
||||
:theme="theme"
|
||||
:editor="EditorComponent"
|
||||
@keydown.ctrl.s.prevent
|
||||
|
|
|
@ -6,6 +6,7 @@ import Moon from './icons/Moon.vue'
|
|||
import Share from './icons/Share.vue'
|
||||
import Download from './icons/Download.vue'
|
||||
import GitHub from './icons/GitHub.vue'
|
||||
import Reload from './icons/Reload.vue'
|
||||
import type { ReplStore } from '@vue/repl'
|
||||
import VersionSelect from './VersionSelect.vue'
|
||||
|
||||
|
@ -14,7 +15,12 @@ const props = defineProps<{
|
|||
dev: boolean
|
||||
ssr: boolean
|
||||
}>()
|
||||
const emit = defineEmits(['toggle-theme', 'toggle-ssr', 'toggle-dev'])
|
||||
const emit = defineEmits([
|
||||
'toggle-theme',
|
||||
'toggle-ssr',
|
||||
'toggle-dev',
|
||||
'reload-page'
|
||||
])
|
||||
|
||||
const { store } = props
|
||||
|
||||
|
@ -105,6 +111,9 @@ function toggleDark() {
|
|||
<button title="Copy sharable URL" class="share" @click="copyLink">
|
||||
<Share />
|
||||
</button>
|
||||
<button title="Reload page" class="reload" @click="$emit('reload-page')">
|
||||
<Reload />
|
||||
</button>
|
||||
<button
|
||||
title="Download project files"
|
||||
class="download"
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<svg fill="currentColor" width="1.7em" height="1.7em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
</template>
|
Loading…
Reference in New Issue