TUI

<template>
 <TsButton>default 按钮</TsButton>
 <TsButton type="primary">基础按钮</TsButton>
 <TsButton type="warning">警告按钮</TsButton>
 <TsButton type="danger">危险按钮</TsButton>
 <TsButton type="success">成功按钮</TsButton>
 <TsButton type="text">文本按钮</TsButton>
</template>

<template>
  <TsButton :disabled="true">普通禁用</TsButton>
  <TsButton :disabled="true" :loading="true">提交订单</TsButton>
  <TsButton :disabled="true" :flash="true">欢迎登录</TsButton>
</template>

<template>
  <div class="item-flex-center-wrap">
    <TsButton size="small">small</TsButton>
    <TsButton>medium</TsButton>
    <TsButton size="larage">larage</TsButton>
    <TsButton size="x-large">x-large</TsButton>
  </div>
</template>

<template>
  <TsButton border type="default">border 效果</TsButton>
  <TsButton shadow>shadow按钮</TsButton>
  <TsButton status="sign">登录</TsButton>
  <TsButton status="verifying">安全环境检测</TsButton>
  <TsButton status="loading">上传中</TsButton>
  <TsButton status="success">保存成功</TsButton>
  <TsButton>
    <template #loading>
      <TsLoading></TsLoading>
    </template>
    <span>自定义ICON</span>
  </TsButton>
  <TsButton status="sign" :loading="loadingStatus" @click="handleLoading">点击开启loading</TsButton>
  <TsButton status="verifying" :loading="true">安全环境检测</TsButton>
  <TsButton status="loading" :loading="true">上传中</TsButton>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const loadingStatus = ref(false);
  const handleLoading = () => {
    loadingStatus.value = true;
    setTimeout(() => {
      loadingStatus.value = false;
    }, 2000);
  };
</script>

<template>
  <div class="item-flex-wrap">
    <TsButton bg="#2d5bff" hoverBg="#1e40af">快速开始</TsButton>
    <TsButton border bg="transparent" color="#2d5bff" borderColor="#2d5bff" hoverBg="#eff6ff">查看文档</TsButton>
    <TsButton shadow bg="linear-gradient(135deg, #6c5ce7, #9b59b6)" hoverBg="linear-gradient(135deg, #6c5ce7, #9b59b6)" color="#fff">查看文档</TsButton>
    <TsButton shadow="0 8px 25px rgba(108, 92, 231, 0.3)" bg="linear-gradient(135deg, #6c5ce7, #9b59b6)" hoverBg="linear-gradient(135deg, #6c5ce7, #9b59b6)" color="#fff">查看文档</TsButton>
  </div>
</template>