uniapp开源组件如何自定义

在 uni-app 中，“开源组件”通常指：

1. uni-app 官方组件（如 <uni-badge>、<uni-popup> 等）
2. uni-ui 组件库
3. DCloud 插件市场里的开源组件
4. 第三方 npm 组件

下面从 使用层面 和 源码层面 两种方式，讲如何“自定义”这些开源组件。

一、使用层面自定义（推荐，最常用）

1️⃣ 通过 Props 配置（首选）

大部分开源组件都提供了可配置属性。

<uni-popup :mask-click="false" type="center">
  <view class="custom-content">自定义内容</view>
</uni-popup>

✅ 优点：不影响源码、升级安全

2️⃣ 通过 Slot 插槽自定义内容

很多组件支持插槽：

<uni-card>
  <template #title>
    <text>自定义标题</text>
  </template>
  自定义内容
</uni-card>

常见插槽：

• #default
• #header
• #footer

3️⃣ 通过 CSS 覆盖样式（最常用）

uni-app 支持 deep 修改组件内部样式。

<style scoped>
::v-deep .uni-popup__mask {
  background-color: rgba(0,0,0,.8);
}
</style>

⚠ 注意：

• H5：/deep/ 或 ::v-deep
• 小程序：部分样式无法穿透（可用 !important 或外部样式）

二、源码层面自定义（进阶）

4️⃣ 下载源码二次开发（最常见自定义方式）

步骤：

1. 插件市场下载组件
2. 放入项目目录（如 components/xxx）
3. 直接改源码

components/
 └── uni-popup/
     ├── uni-popup.vue
     └── ...

import uniPopup from '@/components/uni-popup/uni-popup.vue'

✅ 适合：

• 深度改 UI
• 加业务逻辑
• 公司私有化组件

❌ 缺点：升级麻烦

5️⃣ Fork 开源组件自己维护

适用于插件市场组件：

• Fork 源码
• 改完发布到私有仓库
• npm 安装

npm install my-uni-popup

三、封装一层“业务组件”（最佳实践 ✅）

最推荐的写法：

<!-- components/my-popup.vue -->
<template>
  <uni-popup v-bind="$attrs" v-on="$listeners">
    <slot />
  </uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
  components: { uniPopup }
}
</script>

<style>
::v-deep .uni-popup__content {
  border-radius: 16rpx;
}
</style>

使用：

<my-popup>业务内容</my-popup>

✅ 优点：

• 不改源码
• 统一风格
• 易维护

四、常见自定义场景对照表

五、注意事项（很重要）

• ❌ 不要直接改 node_modules
• ✅ 组件放 components 目录
• ✅ 小程序样式穿透有限
• ✅ 使用 easycom 自动引入

如果你能告诉我：

• 用的是 哪个开源组件
• 想改的是 样式 / 逻辑 / 功能

我可以直接给你 可复制的代码示例。