基础

Interactivity 交互

光标、指针事件、文本选择与 resize 等交互原语。

光标

<div class="pvs-flex pvs-gap-3 pvs-flex-wrap">
  <button type="button" class="pvs-btn pvs-btn--primary pvs-cursor-pointer">pointer</button>
  <button type="button" class="pvs-btn pvs-btn--outline pvs-cursor-default">default</button>
  <button type="button" class="pvs-btn pvs-cursor-not-allowed" disabled>not-allowed</button>
</div>

指针事件

遮罩上的「点击穿透」：父级 pvs-pointer-events-none，按钮 pvs-pointer-events-auto。

可点按钮

底层文字

<div class="pvs-relative pvs-p-6 pvs-border">
  <div class="pvs-absolute pvs-inset-0 pvs-pointer-events-none pvs-flex pvs-items-center pvs-justify-center" style="background:rgb(15 23 42 / 15%)">
    <span class="pvs-pointer-events-auto pvs-btn pvs-btn--sm pvs-btn--primary">可点按钮</span>
  </div>
  <p class="pvs-m-0 pvs-text-muted">底层文字</p>
</div>

文本选择

pvs-select-none 不可选中

pvs-select-text 可选

<p class="pvs-m-0 pvs-select-none pvs-border pvs-p-2">pvs-select-none 不可选中</p>
<p class="pvs-m-0 pvs-mt-2 pvs-select-text pvs-border pvs-p-2">pvs-select-text 可选</p>

textarea 缩放

<textarea class="pvs-textarea pvs-resize-y" rows="2" placeholder="pvs-resize-y 纵向可调">
</textarea>

类名速查

类	样式
`pvs-cursor-pointer/default/not-allowed`	光标
`pvs-pointer-events-none/auto`	指针事件
`pvs-select-none/text/all`	文本选择
`pvs-resize-none/y`	textarea resize

响应式

移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见响应式。

<button type="button" class="pvs-btn pvs-btn--outline pvs-cursor-default md:pvs-cursor-pointer">默认光标 · md 手型</button>