各框架接入

同一个组件在四种环境下的写法。差异只在语法层，行为完全一致 —— 这一点由跨框架端到端测试保证： 同一套用例分别跑四个示例应用，每个应用跑 Chromium 桌面、Chromium 移动与 WebKit 桌面三种环境。

React / Next.js

import { PtButton, PtInput } from '@ptengine/ui-react';

export function Form() {
  const [value, setValue] = useState('');

  return (
    <>
      <PtInput value={value} onPtChange={event => setValue(event.detail)} />
      <PtButton variant="brand" onClick={submit}>
        提交
      </PtButton>
    </>
  );
}

内核里的事件是 ptChange，React 侧生成 onPtChange，event.detail 带类型。

Vue 3 / Nuxt

<script setup lang="ts">
import { PtButton, PtInput } from '@ptengine/ui-vue';

const value = ref('');
</script>

<template>
  <PtInput v-model="value" />
  <PtButton variant="brand" @click="submit">提交</PtButton>
</template>

表单类组件已配好 v-model：文本控件绑 value，勾选类绑 checked，切换按钮（PtToggle）绑 pressed， 折叠面板（PtCollapsible）绑 open，出口都是 ptChange。

Angular 19+

import { PtButton, PtInput, TextValueAccessor } from '@ptengine/ui-angular';

@Component({
  standalone: true,
  imports: [FormsModule, PtButton, PtInput, TextValueAccessor],
  template: `
    <pt-input [(ngModel)]="value" name="q"></pt-input>
    <pt-button variant="brand" (click)="submit()">提交</pt-button>
  `
})
export class FormComponent {
  value = '';
}

别忘了 value accessor

standalone 组件必须在 imports 里显式带上用到的 accessor，否则 ngModel 找不到 accessor， 整棵变更检测会在第一次渲染就抛异常 —— 症状是「所有绑定都不更新」， 很容易误判成组件本身坏了。

accessor	绑定的属性	覆盖的元素
TextValueAccessor	value	input、textarea、select、radio-group、tabs、accordion、menu-group、toggle-group、slider、native-select、combobox
BooleanValueAccessor	checked	checkbox、switch
PressedValueAccessor	pressed	toggle
OpenValueAccessor	open	collapsible

原生 HTML

<pt-input id="q" placeholder="关键词"></pt-input>
<pt-button variant="brand">提交</pt-button>

<script type="module">
  document.querySelector('#q').addEventListener('ptChange', event => {
    console.log(event.detail);
  });
</script>

Svelte、Solid 等

这些框架对自定义元素支持良好，不需要包装层：

npm i @ptengine/ui

<script>
  import '@ptengine/ui/components/pt-button.js';
</script>

<pt-button variant="brand" on:click={submit}>提交</pt-button>

属性传值的一条通则

字符串、数字、布尔可以走 attribute；对象和数组只能走 property。 原生 HTML 下 attribute 只能传字符串，所以复杂数据一律用 JS 赋值：

document.querySelector('pt-slider').value = [20, 80];

React / Vue / Angular 的包装层会自动判断该用哪种方式，你不用操心。