更新记录

0.0.9（2025-09-08） 下载此版本

• fix:修复content不能动态问题

0.0.8（2025-09-08） 下载此版本

• fix: 修复content不能更新的问题

0.0.7（2025-06-16） 下载此版本

• fix: 修复title不能动态变化的问题

平台兼容性

uni-app(4.41)

uni-app x(4.61)

lime-dialog 对话框

一个功能丰富的对话框组件，用于展示重要信息并获取用户反馈。支持标题、内容、确认/取消按钮、自定义内容等多种配置，可用于消息提示、确认操作、信息收集等多种场景。组件提供了组件调用和函数调用两种方式，满足各种复杂的交互需求。

插件依赖：lime-shared、lime-style、lime-icon、lime-button、lime-popup

文档链接

📚 组件详细文档请访问以下站点：

• 对话框文档 - 站点1
• 对话框文档 - 站点2
• 对话框文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-dialog
2. 导入后可能需要重新编译项目
3. 在页面中使用l-dialog组件

代码演示

基础使用

通过v-model绑定是事展示对话框，通过title设置对话框标题，content设置是对话框内容，confirm-btn设置确认按钮或确认按钮所有属性,

<l-dialog 
    v-model="visible" 
    title="对话框标题" 
    content="告知当前状态、信息等内容。描述文案尽可能控制在三行内"
    confirm-btn="知道了"
    @confirm="confirm">
</l-dialog>
<button @click="visible = true">基础使用</button>

const visible = ref(false);
const confirm = () => {
    console.log('点击了确认按钮')
}

确认弹窗

confirm-btn和cancel-btn可以入button按钮所有属性,

<l-dialog 
    v-model="visible"
    title="对话框标题"
    :cancel-btn="{ content: '取消', variant: 'text', size: 'large', type: 'default'}"
    :confirm-btn="{ content: '确认', variant: 'text', size: 'large'}"
    @confirm="confirm"
    @cancel="cancel">
    @confirm="confirm">
</l-dialog>
<button @click="visible = true">确认弹窗</button>

const visible = ref(false);
const confirm = () => {
    console.log('点击了确认按钮')
}
const cancel = () => {
    console.log('点击了取消按钮')
}

通过插槽自定义内容

对话框提供了 默认插槽default、置顶插槽top、标题插槽title、中部middle、操作按钮actions、取消cancel-btn、确认confirm-btn

<l-dialog  
    v-model="visible" 
    confirm-btn="知道了"
    @confirm="visible = false">
    <scroll-view type="list" scroll-y direction="vertical" style="height: 476rpx;">
        <text>
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
          这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
        </text>
      </scroll-view>
</l-dialog>
<button @click="visible2 = true">内容超长</button>

垂直按钮

button-layout设置为vertical可以高按钮组垂直布局

<l-dialog 
    v-model="visible"
    title="对话框标题"
    content="告知当前状态、信息和解决方法"
    cancel-btn="取消"
    confirm-btn="确认"
    button-layout="vertical"
    @confirm="confirm"
    @cancel="cancel">
</l-dialog>
<button @click="visible = true">垂直按钮</button>

命令调用

通过调用组件内部方法可以达到灵活使用，例如异步关闭

<l-dialog ref="dialogRef"></l-dialog>
<button @click="showDialog">命令调用</button>

// 组合式API
const dialogRef = ref<LDialogComponentPublicInstance|null>(null)
const showDialog = () => {
    if(dialogRef.value == null) return
    dialogRef.value!.show({
        title: '弹窗标题',
        closeOnClickOverlay: true,
        buttonLayout: 'vertical',
        content: '告知当前状态、信息和解决方法等内容。',
        confirmBtn: '确定',
        cancelBtn: '取消',
        beforeClose: (action: string): Promise<boolean> => {
            console.log('action', action)
            return new Promise((resolve) => {
                setTimeout(() => {
                    if (action == 'cancel') {
                        resolve(true);
                    } else {
                        // 拦截取消操作
                        resolve(false);
                    }
                }, 1000);
            })
        }
    }).then((index)=>{
        console.log('点击了确定', index)
    }).catch(()=>{
        console.log('点击了取消')
    })
}

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

插件标签说明

l-dialog 为组件标签
lime-dialog 为演示标签

API文档

Props 属性说明

Events 事件

Slots 插槽

命令式调用方法

通过组件实例的 show 方法可以命令式调用对话框：

// 返回Promise对象
const result = dialogRef.value.show({
  title: '标题',
  content: '内容',
  confirmBtn: '确定',
  cancelBtn: '取消',
  // 其他属性...
})

// 处理确认操作
result.then((index) => {
  console.log('确认', index)
})

// 处理取消操作
result.catch(() => {
  console.log('取消')
})

show方法参数

主题定制

组件提供了以下CSS变量，可以通过自定义CSS变量来自定义组件样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助