更新记录

1.0.0（2026-05-12） 下载此版本

提交插件

平台兼容性

uni-app(4.54)

n-dialog

一个基于 uni-app 的自定义弹窗组件，支持多端运行，提供流畅的动画体验和丰富的自定义配置。

特性

• 支持 v-model 双向绑定控制显示/隐藏
• 平滑的显示/隐藏动画过渡效果（350ms）
• 支持标题属性和标题插槽
• 内容区域支持滚动，避免内容过长溢出
• 支持底部操作按钮区，可自定义按钮文本
• 支持点击遮罩层关闭（可配置开关）
• 右上角关闭按钮
• 丰富的 CSS 变量，支持深度自定义样式
• 纯 CSS 绘制关闭图标，性能优异

安装

将组件放入你的 uni-app 项目的 uni_modules 目录中即可使用。

基本使用

<template>
  <view>
    <button @click="showDialog = true">打开弹窗</button>
    <n-dialog v-model="showDialog" title="提示">
      <text>这是弹窗的内容区域</text>
    </n-dialog>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import nDialog from '@/uni_modules/n-dialog/components/n-dialog/n-dialog.vue'

const showDialog = ref(false)
</script>

Props

Events

Slots

自定义样式（CSS 变量）

你可以通过修改以下 CSS 变量来自定义组件样式：

注意：部分 CSS 变量名中存在拼写错误，使用时请严格按照上面的变量名书写。

全局自定义示例：

:root {
  --n-dilaog-background: #f5f7fa;
  --n-dialog-mark-background: rgba(0, 0, 0, 0.7);
  --n-dialog-border-radius: 16rpx;
}

局部自定义示例：

<n-dialog v-model="show" title="自定义弹窗" 
  style="--n-dilaog-background: #fffbe6; --n-dialog-border-radius: 20rpx;">
  <text>自定义背景色的弹窗</text>
</n-dialog>

使用示例

示例1：监听按钮点击事件

<template>
  <view>
    <button @click="show = true">打开</button>
    <n-dialog v-model="show" title="确认操作" @clickBtn="handleBtnClick">
      <text>确定要执行此操作吗？</text>
    </n-dialog>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import nDialog from '@/uni_modules/n-dialog/components/n-dialog/n-dialog.vue'

const show = ref(false)
const handleBtnClick = (val) => {
  if (val === 0) {
    console.log('点击了取消按钮')
  } else {
    console.log('点击了确定按钮')
    // 执行操作逻辑
    show.value = false
  }
}
</script>

示例2：自定义标题和底部按钮

<template>
  <n-dialog v-model="show" :showFooter="false">
    <template #title>
      <view style="color: red; font-size: 32rpx; font-weight: bold;">警告！</view>
    </template>
    <text>这是一个警告弹窗，没有底部按钮。</text>
  </n-dialog>
</template>

示例3：完全自定义底部

<template>
  <n-dialog v-model="show" title="选择操作">
    <text>请选择你要进行的操作：</text>
    <template #footer>
      <view class="custom-footer">
        <view class="custom-btn blue" @click="doA">操作A</view>
        <view class="custom-btn green" @click="doB">操作B</view>
        <view class="custom-btn" @click="closeAll">关闭</view>
      </view>
    </template>
  </n-dialog>
</template>

示例4：不允许点击遮罩关闭

<n-dialog v-model="show" title="重要提示" :clickMark="false">
  <text>此弹窗必须通过点击按钮或关闭按钮关闭，点击遮罩不会关闭。</text>
</n-dialog>

完整示例

<template>
  <view class="demo">
    <button @click="dialog1 = true">基础弹窗</button>
    <button @click="dialog2 = true">自定义按钮文本</button>
    <button @click="dialog3 = true">无底部弹窗</button>
    <button @click="dialog4 = true">自定义样式弹窗</button>

    <n-dialog v-model="dialog1" title="提示" @clickBtn="onBtn1">
      <view class="content-text">这是一个基础的弹窗示例。</view>
    </n-dialog>

    <n-dialog v-model="dialog2" title="删除确认" leftLabel="放弃" rightLabel="删除" @clickBtn="onBtn2">
      <view class="content-text">确定要删除该数据吗？删除后无法恢复。</view>
    </n-dialog>

    <n-dialog v-model="dialog3" title="通知" :showFooter="false">
      <view class="content-text">这里是没有底部按钮的弹窗内容。</view>
    </n-dialog>

    <n-dialog v-model="dialog4" title="自定义样式"
      style="--n-dilaog-background: #f0f9ff; --n-dialog-border-radius: 20rpx; --n-dialog-close-icon-color: #1890ff;">
      <view class="content-text">自定义背景色、圆角和关闭图标颜色。</view>
    </n-dialog>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import nDialog from '@/uni_modules/n-dialog/components/n-dialog/n-dialog.vue'

const dialog1 = ref(false)
const dialog2 = ref(false)
const dialog3 = ref(false)
const dialog4 = ref(false)

const onBtn1 = (val) => {
  console.log('弹窗1点击了按钮：', val)
  dialog1.value = false
}

const onBtn2 = (val) => {
  console.log('弹窗2点击了按钮：', val)
  dialog2.value = false
}
</script>

<style scoped>
.demo {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}
</style>

注意事项

1. 弹窗使用 fixed 定位，默认层级较高，不会被普通页面内容遮挡
2. 内容区域内置 scroll-view，当内容超长时会自动滚动
3. 关闭过程有 350ms 的动画延迟，期间组件不会立即销毁
4. 点击底部按钮后组件不会自动关闭，需要在事件处理函数中手动修改 v-model 为 false