YTUI 2

API ​

NameDescTypeDefaultVue OnlyReact Only
onInteract所有交互行为（例如 click/tap 等）都会统一通过该回调函数告知父组件。() => {}

Usage ​

Vue SFC ​

Interact 0 times.
vue
<script setup>
import { ref } from "vue"
import { InteractiveElement as IE } from "ytui"
const count = ref(0)
</script>
<template>
  <!-- 注意，在 Vue SFC 中，事件监听是 @interact 或 v-on:interact -->
  <IE
    className="mt-4 w-fit p-4 rounded-lg bg-light dark:bg-dark"
    @interact="() => count++"
  >
    <span>Interact {{ count }} times.</span>
  </IE>
</template>

JSX ​

Interact
jsx
import { InteractiveElement as IE } from "ytui"

export default () => (
  <>
    {/* 注意，在 JSX 中，事件监听是 onInteract */}
    <IE
      className="mt-4 w-fit p-4 rounded-lg bg-light dark:bg-dark"
      onInteract={() => {
        // console.log("interact")
      }} 
    >
      <span>Interact</span>
    </IE>
  </>
)

CSS ​

开发组件时，如需要复用可交互元素的样式，可使用 .ia 或 .interactive 类。

jsx
const MyButton = <button className="my-button ia"></button>;

Feature ​

  • TODO: react 的事件防抖。
  • 事件合并以及事件防抖。同一时间段内，多种事件例如 focus/mouseEnter 可能会被依次触发，此时会合并成一次 onInteract 告知父元素。