自定义组件|kita

一、Bilibili 视频嵌入组件 `<bilibili-video>`

描述

bilibili-video 是一个自定义 Web 组件，用于在网页中嵌入 Bilibili 视频播放器。它支持自动播放、静音设置，并通过 Shadow DOM 封装样式和逻辑，确保样式隔离和代码健壮性。

使用示例

<bilibili-video bvid="BV1xx411x7xx" autoplay muted></bilibili-video>

属性

属性名	类型	描述	是否必填	默认值
`bvid`	String	Bilibili 视频的唯一标识（BV 号）	是	无
`autoplay`	Boolean	是否自动播放视频	否	`false`
`muted`	Boolean	是否静音播放视频	否	`false`

注意：

如果未提供 bvid 属性，组件将显示错误提示：“错误：缺少 bvid 属性”。
属性值只需存在即可启用（例如，<bilibili-video autoplay> 等价于 autoplay="true"）。

二、双色链接组件 `<resource-link>`

描述

resource-link 是一个自定义 Web 组件，用于创建具有双色样式的链接按钮，分为左侧和右侧两部分。每个部分可设置不同文本和背景颜色，支持悬停效果和键盘交互（Enter 和 Space 键），符合无障碍标准。

使用示例

<resource-link left-text="文档" right-text="PDF" href="/file.pdf" target="_blank"></resource-link>

属性

属性名	类型	描述	是否必填	默认值
`left-text`	String	左侧按钮显示的文本	否	空字符串
`right-text`	String	右侧按钮显示的文本	否	空字符串
`href`	String	链接的目标 URL	否	`#`
`target`	String	链接的打开方式（如 `_blank`）	否	`_self`

注意：

如果 left-text 或 right-text 为空，该部分将隐藏。
如果 href 未提供或为 #，点击链接不会跳转。

三、完整示例

示例说明

Bilibili 视频：嵌入 BV 号为 BV1ve4y1w7Ky 的视频，启用自动播放，未启用静音。
双色链接：创建一个双色按钮，左侧显示“原神启动”，右侧显示“提取码:ysqd”，点击后在新标签页打开 https://bh3.mihoyo.com/。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义组件示例</title>
  <script src="custom.js"></script> <!-- 假设 custom.ts 已编译为 custom.js -->
</head>
<body>
  <!-- 嵌入 Bilibili 视频 -->
  <bilibili-video bvid="BV1ve4y1w7Ky" autoplay></bilibili-video>

  <!-- 双色链接按钮 -->
  <resource-link 
    left-text="原神启动" 
    right-text="提取码:ysqd" 
    href="https://bh3.mihoyo.com/" 
    target="_blank">
  </resource-link>
</body>
</html>