@kbapp/web-components
v0.0.6-alpha.0
Published
> 开吧 Web Components 组件库，提供帖子列表和发帖功能
Downloads
58
Readme
@kbapp/web-components
开吧 Web Components 组件库，提供帖子列表和发帖功能
框架支持
Web Components 是浏览器原生支持的组件标准，因此可以在任何现代前端框架中使用，包括：
- React
- Vue 2
- Vue 3
- Angular
- 原生 JavaScript
安装
npm:
npm i @kbapp/web-components使用方式
ES 模块方式
<div id="app">
<kb-note-list style="--1px: 1px" thread-key="由开吧提供"></kb-note-list>
<kb-note-create class="note-create" thread-key="由开吧提供"></kb-note-create>
</div>
<script type="module">
import { NoteList, NoteCreate, openPostEditorCreateNote } from '@kbapp/web-components'
// 防止重复注册组件
if (!customElements.get('kb-note-list')) {
// 注册自定义组件,组件名开发者自定义
customElements.define('kb-note-list', NoteList)
}
if (!customElements.get('kb-note-create')) {
customElements.define('kb-note-create', NoteCreate)
}
// 使用 openPostEditorCreateNote 方法唤起发帖器
function openPostEditor() {
openPostEditorCreateNote({
threadId: '由开吧提供'
})
}
</script>Script 标签方式
<div id="app">
<kb-note-list style="--1px: 1px" thread-key="由开吧提供"></kb-note-list>
<kb-note-create class="note-create" thread-key="由开吧提供"></kb-note-create>
</div>
<script src="https://unpkg.com/@kbapp/[email protected]"></script>
<script>
// 通过全局变量 kbWebComponents 访问
const { NoteList, NoteCreate, openPostEditorCreateNote } = kbWebComponents
if (!customElements.get('kb-note-list')) {
customElements.define('kb-note-list', NoteList)
}
if (!customElements.get('kb-note-create')) {
customElements.define('kb-note-create', NoteCreate)
}
// 使用 openPostEditorCreateNote 方法唤起发帖器
function openPostEditor() {
openPostEditorCreateNote({
threadId: '由开吧提供'
})
}
</script>测试页面
https://unpkg.com/@kbapp/web-components@latest/examples/index.html
组件说明
kb-note-list
渲染帖子列表组件
属性：
thread-id：板块 ID（与 thread-key 二选一）thread-key：板块 Key（与 thread-id 二选一）
kb-note-create
发帖按钮组件
属性：
thread-id：板块 ID（与 thread-key 二选一）thread-key：板块 Key（与 thread-id 二选一）
暴露方法
openPostEditorCreateNote
唤起发帖器并发帖的方法，是 NoteCreate 组件的替代品
参数：
threadId：板块 ID（与 threadKey 二选一）threadKey：板块 Key（与 threadId 二选一）
使用示例：
import { openPostEditorCreateNote } from '@kbapp/web-components'
// 使用 threadId
openPostEditorCreateNote({
threadId: '由开吧提供'
})
// 或使用 threadKey
openPostEditorCreateNote({
threadKey: 'example-thread-key'
})样式设置
组件内部尺寸基于 --1px 变量计算，可以通过设置该变量来自定义组件大小
1. 固定 1px
<kb-note-list style="--1px: 1px" thread-key="由开吧提供"></kb-note-list>2. 等比例放大（基于 375px 设计稿）
<kb-note-list style="--1px: calc(100vw/375)" thread-key="由开吧提供"></kb-note-list>3. 使用 rem 方案
如果你的项目采用 rem 方案，可以将 --1px 设置为你的 1px 对应的 rem 值：
<kb-note-list style="--1px: 0.01rem" thread-key="由开吧提供"></kb-note-list>示例
完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components 示例</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
}
.note-create {
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<h1>开吧 Web Components 示例</h1>
<div id="app">
<kb-note-list style="--1px: 100vw/375" thread-key="由开吧提供"></kb-note-list>
<kb-note-create style="--1px: 100vw/375" class="note-create" thread-key="由开吧提供"></kb-note-create>
</div>
<button onclick="openPostEditor()">使用方法唤起发帖器</button>
<script type="module">
import { NoteList, NoteCreate, openPostEditorCreateNote } from '@kbapp/web-components'
if (!customElements.get('kb-note-list')) {
customElements.define('kb-note-list', NoteList)
}
if (!customElements.get('kb-note-create')) {
customElements.define('kb-note-create', NoteCreate)
}
window.openPostEditor = function() {
openPostEditorCreateNote({
threadId: '由开吧提供'
})
}
</script>
</body>
</html>