Windi CSS 交互工具类：光标、选中与指针事件

简写	对应属性
`caret-red-500`	`caret-color`
`caret-opacity-50`	`caret-opacity: 0.5;`
`cursor-[pointer wait text move help not-allowed]`	`cursor: pointer;`
`placeholder-red-500`	`placeholder-color`
`placeholder-opacity-50`	`placeholder-opacity: 0.5;`
`pointer-events-none pointer-events-auto`	`pointer-events: auto;`
`select-[none text all auto]`	`user-select: auto`

示例

<template>
  <div>
    <div class="cursor-pointer">
      <img
        class="animate-spin w-50px h-50px duration-5000"
        src="https://6d69-miofly-k1xjk-1303051262.tcb.qcloud.la/images/glnz/1.jpg"
        alt=""
      />
    </div>
    <div class="flex justify-around">
      <div :class="[baseClass, 'cursor-wait']">cursor-wait</div>
      <div :class="[baseClass, 'cursor-text']">cursor-text</div>
      <div :class="[baseClass, 'cursor-not-allowed']">cursor-not-allowed</div>
    </div>

    <input
      placeholder="这是一段测试文字"
      class="caret-green-400 caret-opacity-50 placeholder-blue-500 placeholder-opacity-90"
      type="text"
      v-model="test"
    />

    <a href="http://www.baidu.com" class="pointer-events-none">
      禁止点击 pointer-events-none
    </a>
    <a href="http://www.baidu.com" class="pointer-events-auto">
      禁止点击 pointer-events-auto
    </a>
  </div>
  <div class="select-none">这是一段测试文字 这也是一段你测试文字</div>
  <div class="select-text">这是一段测试文字 这也是一段你测试文字</div>
  <div class="select-all">这是一段测试文字 这也是一段你测试文字</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const test = ref('');
const baseClass = ref(
  'w-50px h-50px leading-50px bg-red-500 m-auto text-black whitespace-nowrap',
);
</script>

<style scoped></style>