fix: fullscreen and browser conficts

chansee97 · May 14, 2024 · 344baa7 · 344baa7
1 parent 8bafc3a
commit 344baa7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/layouts/components/header/FullScreen.vue b/src/layouts/components/header/FullScreen.vue
@@ -2,6 +2,16 @@
 import { useAppStore } from '@/store'
 
 const appStore = useAppStore()
+
+useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'F11' && e.type === 'keydown') {
+      e.preventDefault()
+      appStore.toggleFullScreen()
+    }
+  },
+})
 </script>
 
 <template>
@@ -15,5 +25,3 @@ const appStore = useAppStore()
     <span>{{ $t('app.toggleFullScreen') }}</span>
   </n-tooltip>
 </template>
-
-<style scoped></style>
diff --git a/src/views/demo/editor/rich/index.vue b/src/views/demo/editor/rich/index.vue
@@ -6,15 +6,25 @@ onMounted(() => {
     text.value = '<p>模拟 Ajax 异步设置内容</p>'
   }, 1500)
 })
+
+const active = ref(false)
 </script>
 
 <template>
   <n-card title="富文本编辑器">
     <n-space vertical :size="12">
       <n-alert title="基于 Quill 封装" type="success" />
+      <n-switch v-model:value="active">
+        <template #checked>
+          禁用
+        </template>
+        <template #unchecked>
+          启用
+        </template>
+      </n-switch>
       <n-space :size="12">
         <div class="h-2xl">
-          <RichTextEditor v-model="text" />
+          <RichTextEditor v-model="text" :disabled="active" />
         </div>
         <div>
           <n-h2>v-html 预览</n-h2>