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 { TableProps } from './md-table';
export type { BgProps } from './md-bg';

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

@ -1,8 +1,12 @@
import { customElement, noShadowDOM } from "solid-element";
import {createEffect, createResource } from "solid-js";
import { createEffect, createResource } from "solid-js";
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();
// 从 element 的 textContent 获取图片路径
@ -38,7 +42,7 @@ customElement("md-bg", {}, (props, { element }) => {
articleEl.style.backgroundImage = '';
if (image()) {
articleEl.style.backgroundImage = `url(${resolvedSrc})`;
articleEl.style.backgroundSize = 'cover';
articleEl.style.backgroundSize = props.fit || 'cover';
articleEl.style.backgroundPosition = 'center';
articleEl.style.backgroundRepeat = 'no-repeat';
}