hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: add fit prop to bg

This commit is contained in:
hyper 2026-02-27 21:26:51 +08:00
parent 72e376a6ad
commit 7e95c44d8d
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/index.ts
View File

@ -16,3 +16,4 @@ export { FileTreeNode, HeadingNode } from './FileTree';
// 导出数据类型 // 导出数据类型
export type { DiceProps } from './md-dice'; export type { DiceProps } from './md-dice';
export type { TableProps } from './md-table'; export type { TableProps } from './md-table';
export type { BgProps } from './md-bg';

28
src/components/md-bg.tsx
View File

@ -1,8 +1,12 @@
import { customElement, noShadowDOM } from "solid-element"; import { customElement, noShadowDOM } from "solid-element";
import {createEffect, createResource } from "solid-js"; import { createEffect, createResource } from "solid-js";
import { resolvePath } from "./utils/path"; import { resolvePath } from "./utils/path";
customElement("md-bg", {}, (props, { element }) => { export interface BgProps {
fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
}
customElement("md-bg", { fit: "cover" }, (props, { element }) => {
noShadowDOM(); noShadowDOM();
// 从 element 的 textContent 获取图片路径 // 从 element 的 textContent 获取图片路径
@ -32,16 +36,16 @@ customElement("md-bg", {}, (props, { element }) => {
const [image] = createResource(resolvedSrc, loadImage); const [image] = createResource(resolvedSrc, loadImage);
createEffect(() => { createEffect(() => {
// 图片加载完成后，将背景图片设置到 article 元素 // 图片加载完成后，将背景图片设置到 article 元素
if(!articleEl)return; if(!articleEl)return;
articleEl.style.backgroundImage = ''; articleEl.style.backgroundImage = '';
if (image()) { if (image()) {
articleEl.style.backgroundImage = `url(${resolvedSrc})`; articleEl.style.backgroundImage = `url(${resolvedSrc})`;
articleEl.style.backgroundSize = 'cover'; articleEl.style.backgroundSize = props.fit || 'cover';
articleEl.style.backgroundPosition = 'center'; articleEl.style.backgroundPosition = 'center';
articleEl.style.backgroundRepeat = 'no-repeat'; articleEl.style.backgroundRepeat = 'no-repeat';
} }
}); });
return null; return null;