Feat: 增加背景颜色选择

Lruihao · Apr 4, 2024 · 1adfc97 · 1adfc97
1 parent 108170f
commit 1adfc97
Showing 1 changed file with 25 additions and 3 deletions.
diff --git a/src/views/apple-devices-preview.vue b/src/views/apple-devices-preview.vue
@@ -1,10 +1,11 @@
 <!-- 网站预览图生成 -->
 <template>
-  <div>
+  <div :style="{ backgroundColor: pageBackgroundColor }">
     <div v-if="!isPreview" class="page-header">
       <el-input v-model="desktopLink" placeholder="输入桌面端链接" />
       <el-input v-model="mobileLink" placeholder="输入移动端链接" />
       <el-switch v-model="showBangs" active-text="显示刘海" />
+      <el-color-picker v-model="pageBackgroundColor" :predefine="predefineColors" />
       <el-button-group>
         <el-button type="primary" size="medium" @click="preview">预览</el-button>
         <el-button type="primary" size="medium" :loading="loading" @click="generatePreview">下载</el-button>
@@ -39,6 +40,19 @@ export default {
       loading: false,
       showBangs: false,
       isPreview: false,
+      pageBackgroundColor: '#fff',
+      predefineColors: [
+        '#fff',
+        '#000',
+        '#ffe9e3',
+        '#dcd6f7',
+        '#B1B3E4',
+        '#81d795',
+        '#7ac5cd',
+        '#f6e58d',
+        '#ffbe76',
+        '#ff8e8e',
+      ],
     }
   },
   computed: {
@@ -52,6 +66,14 @@ export default {
       headerContainer.style.display = val ? 'none' : 'flex'
     },
   },
+  mounted() {
+    // 监听键盘事件 Esc 退出预览
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        this.isPreview = false
+      }
+    })
+  },
   methods: {
     getIframeImage() {
       const iframeHtml = document.querySelector('iframe')
@@ -92,7 +114,7 @@ export default {
     preview() {
       this.isPreview = true
       this.$message({
-        message: '预览 15 秒后自动退出，你可以使用截图工具保存图片！',
+        message: '预览 15 秒后自动退出或按 ESC 键退出，你可以使用截图工具保存图片！',
         type: 'info',
         showClose: true,
         duration: 2000,
@@ -142,7 +164,7 @@ export default {
   gap: 0.5rem;
   margin-block: 1rem;
   .el-input {
-    width: 350px;
+    width: 300px;
   }
 }
 .d-none {