Vue

配置

import { createApp } from 'vue';
import ThlUI from '@thl-ui/vue';
import '@thl-ui/styles/thl-ui.css';
import App from './App.vue';

createApp(App)
  .use(ThlUI, {
    locale: 'zh',
    theme: 'default',
    persist: true,
    components: { Button: { rounded: true }, Table: { pageSize: 25 } },
  })
  .mount('#app');

默认导出会全局注册所有组件（<ThlButton> / <thl-button>）。如需 tree-shaking，只安装配置/i18n 插件，并在使用处导入组件：

import { ThlUI } from '@thl-ui/vue';      // 不含全局组件的插件
app.use(ThlUI, { locale: 'zh' });

<script setup lang="ts">
import { ThlButton } from '@thl-ui/vue';
</script>

Composables

Composable	返回值
useThlConfig()	{ config: Ref<ThlConfig>, set }
useI18n()	{ t, te, n, d, locale, setLocale, intlLocale }——响应式
useToast()	toast manager
useDefaults(name, props)	合并后的默认值（computed）
usePrefix()	类名前缀（computed）
useThl()	原始的 ThlInstance

模板中还可以使用 $t 和 $thl：

<template>
  <h1>{{ $t('menu.dashboard') }}</h1>
  <ThlButton @click="$thl.set({ theme: 'purple-dark' })">紫色</ThlButton>
</template>

v-model

所有控件都支持 v-model（modelValue），并在需要时支持具名 model：

<ThlSelect v-model="country" :options="countries" searchable clearable />
<ThlSwitch v-model="on" />
<ThlTabs v-model="tab" :items="items" />
<ThlPagination v-model:page="page" v-model:page-size="size" :total="200" />
<ThlModal v-model:open="open" title="你好" />
<ThlSteps v-model:current="step" :items="steps" />

表单与校验

ThlField 通过默认插槽暴露生成的 id：

<ThlForm :values="v" @submit="(ok) => ok && save()">
  <ThlField label="邮箱" name="email" :value="v.email" :rules="[rules.required(), rules.email()]" required v-slot="{ id }">
    <ThlInput :id="id" v-model="v.email" type="email" />
  </ThlField>
  <ThlButton type="submit" variant="primary">提交</ThlButton>
</ThlForm>

路由（AppLayout）

使用 #link 插槽在侧边菜单中渲染路由链接：

<ThlAppLayout :menu="menu" :current-path="route.path" :user="user">
  <template #link="{ item, content, class: cls, current }">
    <RouterLink :to="item.href" :class="cls" :aria-current="current ? 'page' : undefined">
      <component :is="() => content" />
    </RouterLink>
  </template>
  <RouterView />
</ThlAppLayout>

confirm()

import { confirm } from '@thl-ui/vue';
if (await confirm({ icon: 'warning' })) remove();