更新记录

0.0.1（2024-11-26） 下载此版本

• init

平台兼容性

lime-dialog 对话框

• 弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。支持组件调用和函数调用两种方式。
• 插件依赖lime-shared,lime-style,lime-icon,limg-button,lime-popup,不喜勿下

安装

插件市场导入即可，首次导入可能需要重新编译

代码演示

基础使用

通过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: '弹窗标题',
        closeOnOverlayClick: 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('点击了取消')
    })
}

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-dialog/compoents/lime-dialog -->
<lime-dialog />

插件标签

• 默认 l-dialog 为 component
• 默认 lime-dialog 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

API

Props

Events

Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。

常见问题

插件包含一下lime-svg为收费插件。如果你不需要svg，可以在lime-icon里注释掉，lime-svg为APP原生插件，收费为1元，源码为5元。如果你需要svg，可以考虑一下购买。

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。