⌘

快速上手

安装

pnpm

yarn

npm

pnpm add dangoui

yarn add dangoui

npm install dangoui

在 uni-app 中使用

pnpm

yarn

npm

pnpm add vite-plugin-dangoui

yarn add vite-plugin-dangoui

npm install vite-plugin-dangoui

在 vite.config.js 中引入插件：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import dangoui from 'vite-plugin-dangoui'

export default defineConfig({
  plugins: [
    dangoui(),
    uni(),
  ],
})

引入

样式引入

小程序

Web

import 'virtual:dangoui-theme.css'

import 'dangoui/style.css'
import 'dangoui/theme.css'

组件引入，注意在小程序中需搭配使用 vite-plugin-dangoui 才能正常使用

import { DuButton } from 'dangoui'

开发注意事项

小程序

组件库默认未开启虚拟化组件节点，因此，与 Web 平台不同，在微信小程序中，自定义组件本身会有一个额外的节点，你需要注意这对你布局的影响，你可以给插件传参数 virtualHost: true 来开启虚拟化节点
因为要考虑到小程序，API 设计会做出一些取舍，我们的设计原则是保持各个端尽量统一
一些组件插槽的预期使用场景可能是会有多个子节点，比如 DuTabs 组件的 right 插槽，预期传递多个 DuButton 组件进来，然后 flex 布局。但在小程序中，多个节点会被 view 节点包一层，这样 flex 布局就失效了，为了提升开发体验，对于插槽下的没有 class 的 view 节点，这种情况下会给这个 view 节点加上 flex 布局。但如果你就是想要传递一个 view 节点给插槽，由自己定义布局，在小程序平台请务必给你的节点一个 class

本页包含