快速上手

本节将介绍如何在 uni-app 项目中安装和使用 Dier UI。

安装

pnpm

pnpm add dier-ui

npm

npm install dier-ui

yarn

yarn add dier-ui

配置

方式一：easycom 自动导入（推荐）

在 pages.json 中配置 easycom 规则，组件会自动按需导入：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^dr-(.*)": "dier-ui/components/dr-$1/dr-$1.vue"
    }
  },
  "pages": [
    // ...
  ]
}

配置后，可以直接在模板中使用组件，无需手动导入：

<template>
  <dr-picker v-model:show="show" :columns="columns" />
</template>

方式二：全局注册

在 main.js 中全局注册所有组件：

import { createSSRApp } from 'vue'
import App from './App.vue'
import DierUI from 'dier-ui'

export function createApp() {
  const app = createSSRApp(App)
  app.use(DierUI)
  return { app }
}

方式三：按需导入

在需要使用组件的页面中手动导入：

<script setup>
import { DrPicker, DrDatePicker } from 'dier-ui'
</script>

<template>
  <dr-picker v-model:show="show" :columns="columns" />
</template>

基础示例

Picker 选择器

<template>
  <view class="demo">
    <button @click="show = true">打开选择器</button>
    <text>选中: {{ value }}</text>

    <dr-picker
      v-model:show="show"
      :columns="columns"
      title="选择城市"
      @confirm="onConfirm"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
const value = ref('')
const columns = ['北京', '上海', '广州', '深圳', '杭州']

const onConfirm = (e) => {
  value.value = e.value[0]?.label
}
</script>

Upload 上传

<template>
  <dr-upload
    v-model="urls"
    :custom-upload="uploadFn"
    :max-count="3"
  />
</template>

<script setup>
import { ref } from 'vue'

const urls = ref('')

// 自定义上传函数
const uploadFn = async (file) => {
  // 调用你的上传接口
  const res = await yourApi.upload(file.path)
  return res.url
}
</script>

TypeScript 支持

Dier UI 使用 TypeScript 编写，提供完整的类型定义。

下一步

• 查看 组件列表 了解所有可用组件
• 阅读各组件文档了解详细用法和 API