快速开始

环境与 Demo

• HBuilderX 5.26+，uni-app x 项目。
• 当前组件 Demo 路径统一为 #/pages/components/<组件名>/index，例如 #/pages/components/xtf-button/index。

easycom 现状与显式导入

当前项目在 pages.json 中设置 easycom.autoscan=false，并为组件维护了小写标签 custom 映射。映射可供现有页面使用，但文档推荐显式导入目标 .uvue 和 PascalCase 标签，使依赖、自包含示例和跨项目迁移边界清晰。

<template>
  <view class="start-page">
    <XtfButton label="保存" theme="primary" @click="save" />
  </view>
</template>
<script setup lang="uts">
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
function save(): void { uni.showToast({ title: "已保存", icon: "none" }) }
</script>
<style>
.start-page { display: flex; flex-direction: column; padding: 24rpx; }
</style>

主题与 Provider

在 App.uvue 的非 scoped 样式中引入 @/uni_modules/xtf-linkuiunix/theme/index.css。局部主题或语义配置使用 ConfigProvider；不要只复制单个组件的内部颜色。

<template>
  <view class="provider-page">
    <XtfConfigProvider>
      <XtfInput :value="name" label="账单名称" @input="updateName" />
    </XtfConfigProvider>
    <text class="provider-value">{{ name }}</text>
  </view>
</template>
<script setup lang="uts">
import { ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfInput from "@/uni_modules/xtf-linkuiunix/components/xtf-input/xtf-input.uvue"
const name = ref("十月账单")
function updateName(value: any): void { name.value = value == null ? "" : value.toString() }
</script>
<style>
.provider-page { display: flex; flex-direction: column; padding: 24rpx; }
.provider-value { margin-top: 12rpx; color: #334155; font-size: 24rpx; }
</style>

受控值写回

文档示例不使用隐式 v-model：传入 modelValue/value/current/show 后，监听组件实际声明的 update:*、input 或 change 事件并写回本地状态。具体事件名以组件事件表为准。