更新记录

1.0.6（2024-10-09） 下载此版本

改为 uni_modules 模式

1.0.5（2024-09-26） 下载此版本

新增dialogStyle、titleStyle、contentStyle 三个属性，分别设置弹窗样式、标题样式、内容样式

1.0.4（2024-03-26） 下载此版本

增加position属性，配置弹窗显示位置，支持 center/bottom

增加示例工程

平台兼容性

cc-dialog使用说明

本弹窗组件不做样式上的干扰、样式完全靠开发者自定义了

默认写的样式是我公司UI出的。

view 部分

<button @click="openDialog">打开弹窗</button>
<cc-dialog ref="dialog"></cc-dialog>

vue2

主要是工作中经常遇到弹窗样式需要自定义的。uni.showModal 样式又修改不了。

以前写过简单的，通过父子组件传值的方式。

<cc-dialog
  title="弹窗标题"
  content="弹窗内容"
  @cancel="cancel"
  @confirm="confirm"
/>

如上代码：

这种，页面上只有一个弹窗还可以。但是弹窗多了。要定义很多属性、很多方法，太麻烦了。

于是就开发了这么一个弹窗组件

另：vue3 setup 写法的后续完善。目前仅支持一些简单的用法，可满足一般使用。。可自定义。很简单。

本组件仅测试了H5和微信小程序

open 方法传入对象，与 uni.showModal 写法保持一致

vue2、vue3调用open方法后传入的属性一致

javscript 部分

openDialog() {
    const dialog = this.$refs.dialog
    dialog.open({
        title: '这是标题',
        content: '这是内容<br>第二行',
        confirmText: '确定',
        cancelText: '取消',
        openType: 'feedback',
         position: 'bottom',
         titleStyle: { color: 'red' },
         dialogStyle: { padding: '2px' },
         contentStyle: { 'text-align': 'left' },
        confirm: res => {
            console.log('点击了确定按钮');
            dialog.close()
        },
        cancel: res => {
            console.log('点击了取消按钮');
            dialog.close()
        }
    })
},

属性说明

插槽说明

vue3

import {
    ref
  } from "vue";
  const dialog = ref()
  const openDialog = () => {
    console.log(dialog.value);
    dialog.value.open({
      title: '温馨提示',
      content: '内容',
      cancelText: '取消',
      confirmText: '确定',
      position: 'bottom',
      disabled: true,
      showClose: true,
      animationClass: 'animate__flipInX',
      titleStyle: { color: 'red' },
      dialogStyle: { padding: '2px' },
      contentStyle: { 'text-align': 'left' },
      confirm: (res) => {
        dialog.value.close()
      },
      cancel: () => {
        dialog.value.close()
      }
    })
  }