# useInteractiveRole

## 使用方法

把「这个多态组件到底渲染成什么」收在一处决定：有地址就是链接，没地址但有点击就是按钮，都没有就是一段普通内容。一个组件时而当链接、时而当按钮、时而只是内容的，都该走这里；Token、Thumbnail、Item 都是这么做的。

```ts
import { useInteractiveRole } from '@astryx-vue/core'
```

点击这一项收的是布尔值，不是处理函数本身：Vue 里「函数」和「取值函数」分不开，传 `() => props.onClick` 会被当场调用掉，所以写成 `hasOnClick: () => props.onClick != null`。

上游还会读父级给的「触发上下文」（Popover、DropdownMenu 之类），让组件不用改就自动成为新浮层的合法触发器。这个移植版的浮层不支持用子元素当触发器，没有这份上下文可读，所以判断停在点击这一层。

## 建议

| 指引 | 做法 |
| --- | --- |
| 推荐 | 按返回的角色挑元素，只有 `"link"` 才渲染 `a`，键盘和中键新开标签这些行为就由浏览器负责。 |
| 推荐 | `isDisabled` 原样传进去，不要自己先把 href 丢掉；判断角色时它会自己忽略停用的地址。 |
| 不要 | 在组件里再写一套 href / 点击谁优先的判断；所有组件都该用同一个顺序。 |

## 参数

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `options.href` | `string \| undefined`，或它的 ref / 取值函数 | — | 要跳转的地址。优先级最高：有非空地址就是链接。 |
| `options.hasOnClick` | `boolean`，或它的 ref / 取值函数 | `false` | 组件有没有点击处理。地址之后轮到它：有就是按钮。上游收的是处理函数本身，这里收布尔值是为了把处理函数和取值函数分开。 |
| `options.isDisabled` | `boolean`，或它的 ref / 取值函数 | `false` | 为真时判断角色不看 href（停用的链接本身就不该是链接），于是角色从点击往下找，都没有就是 inert。 |

## 返回值

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `role` | `ComputedRef<'link' \| 'button' \| 'inert'>` | 组件该渲染的元素：链接渲染 `a`，按钮渲染 `button`，剩下的是不带交互的 `span` / `div`。 |