@zhaomushan/screen-bg

Vue 3 全屏背景色：自选颜色或点预设色块，平滑切换整页背景；层在底层、pointer-events: none，不挡操作。

安装

npm install @zhaomushan/screen-bg vue

使用

<script setup lang="ts">
import { ref } from "vue";
import { ScreenBackdrop, ScreenBgPicker } from "@zhaomushan/screen-bg";
import "@zhaomushan/screen-bg/style.css";

const bg = ref("#1e293b");
const presets = ["#0f172a", "#4a6fa5", "#6366f1", "#fef3c7"];
</script>

<template>
  <ScreenBackdrop v-model="bg" :transition-ms="400" />
  <main>
    <ScreenBgPicker v-model="bg" :presets="presets" />
    <!-- 你的页面 -->
  </main>
</template>

组件

| 组件 | 作用 | |------|------| | ScreenBackdrop | 全屏 fixed 背景色，v-model 为 #rrggbb | | ScreenBgPicker | 预设色块 + 系统取色器 |

ScreenBackdrop

| 属性 | 说明 | 默认 | |------|------|------| | modelValue | 背景色 | #1e293b | | active | 是否显示层 | true | | transitionMs | 过渡时长 ms | 400 | | zIndex | 层级 | 0 |

发版

cd packages/screen-bg
npm run build
npm publish --access public