@skb_skb/kb-uniapp

@skb_skb/kb-uniapp

Uni-app Vue 3 组件（模板使用 view / text / image，便于小程序）。

npm i @skb_skb/kb-uniapp @skb_skb/kb-utils

pages.json easycom:

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^kb-(.*)": "@skb_skb/kb-uniapp/kb-$1/kb-$1.vue"
    }
  }
}

import '@skb_skb/kb-uniapp/style.css'
import { usePullRefresh } from '@skb_skb/kb-uniapp/composables'

Tailwind：

presets: [require('@skb_skb/kb-uniapp/tailwind-preset')]

组件

empty / modal / countdown / fixed-btn / fixed-tabs / navbar / sku / addr-picker / FormRenderer

FormRenderer

配置驱动表单（对齐 @skb_skb/kb-taro FormRenderer API）：fields + 注入 fetchCaptcha / sendSms。

<script setup>
import { ref } from 'vue'
import { FormRenderer } from '@skb_skb/kb-uniapp'

const formRef = ref()
const fields = [
  { type: 'input', name: 'phone', label: '手机号', required: true, rules: [{ required: true, message: '请输入手机号' }] },
  { type: 'imageCaptcha', name: 'imageVericode', label: '图片验证码', fetchCaptcha: async () => ({ imageUrl, captchaId }) },
  { type: 'smsCode', name: 'vericode', label: '短信验证码', phoneField: 'phone', smsUsage: 'demo', sendSms },
  { type: 'picker', name: 'gender', label: '性别', options: [{ text: '男', value: '1' }] },
  { type: 'datePicker', name: 'birthday', label: '生日' }
]
</script>

<template>
  <FormRenderer
    ref="formRef"
    :fields="fields"
    field-align="right"
    @finish="onFinish"
  >
    <template #footer="{ submit }">
      <button @click="submit">提交</button>
    </template>
  </FormRenderer>
</template>

ref 暴露：getFieldsValue / setFieldsValue / validate / submit / getFieldHandle。

kb-empty 默认图标路径为 /static/images/empty.png，请在宿主项目放置对应静态资源（模板已提供示例图）。

平台差异（如微信胶囊避让、H5 顶栏偏移）使用运行时判断，不依赖 npm 包内条件编译。