$cvDialogRender 动态弹窗 ¶

简要 ¶

动态弹窗
render

vue 调用方式 ¶

方式1（只能在 setup 下调用）

import { getCurrentInstance, nextTick } from 'vue';

// 获取当前组件实例
const instance = getCurrentInstance();
// 从实例中获取全局属性
const { $cvDrawerRender } = instance.appContext.config.globalProperties;

 nextTick(() => {
    $cvDrawerRender(
      // instance.ctx,
      instance.vnode,
      // 抽屉body，需要展示的内部内容的组件
      DiaTest,
      // 抽屉的属性
      { title: '', size: '100%' },
      // 传递给内部页面的参数，内部用props接收
      { flowID: '' }
    ).show();
  });

方式2（只能在 setup 下调用）

import { getCurrentInstance, nextTick } from 'vue';
import { cvDrawerRender } from '@10yun/cv-pc-ui';
// 获取当前组件实例
const instance = getCurrentInstance();
 nextTick(() => {
    cvDrawerRender(
      // instance.ctx,
      instance.vnode,
      // 抽屉body，需要展示的内部内容的组件
      DiaTest,
      // 抽屉的属性
      { title: '', size: '100%' },
      // 传递给内部页面的参数，内部用props接收
      { flowID: '' }
    ).show();
  });

调用弹窗的页面 ¶

vue

<template>
  <div>
    <cv-btn-base @click="openDialogDefult">调用子弹窗默认方式</cv-btn-base>
    <cv-btn-base @click="openDialog1">调用子弹窗简写方式</cv-btn-base>
    <cv-btn-base @click="openDialogTable">测试3-加载列表框</cv-btn-base>
    <!-- <cv-btn-base @click="openDialog2">测试2</cv-btn-base> -->
  </div>
</template>
<script>
import dialogBody1 from './renderJsx/dialogBody1';
import dialogBody2 from './renderJsx/dialogBody2';
import dialogCompTable from './renderJsx/dialogCompTable';

// import JSDialog from "../../../packages/dialog-box/src/index.js";
export default {
  data() {
    return {};
  },
  methods: {
    // 打开子弹窗
    openDialogDefult() {
      let dialogOption = {
        title: '弹窗名称',
        width: '60%',
        beforeClose: (done) => {
          console.log('guanbi前的操作');
          done();
        }
      };
      let propsOption = {};
      let onFunc = {
        subSendParent(chuandiData) {
          console.log('---走到这里了，传递的数据', chuandiData);
        },
        openDialog2(chuandiData) {
          console.log('---走到这里了 openDialog2，准备', this);
          console.log('---走到这里了 openDialog2，传递的数据', chuandiData);
        }
      };
      // 注册弹窗并且打开
      this.$cvDialogRender(dialogBody1, dialogOption, propsOption, onFunc).show();
    },
    openDialogTable() {
      this.$cvDialogRender(
        dialogCompTable,
        { title: '这个是弹窗的名字', class: 'js-dialog' },
        { defaultName: 'JSDialog传递的参数' },
        {
          openDialog2(chuandiData) {
            console.log('---走到这里了，准备', this);
            console.log('---走到这里了，传递的数据', chuandiData);
          }
          // openDialog2: (receiveData) => {
          //   console.log('---走到这里了，准备', receiveData);
          //   this.openDialog2();
          // },
        }
      ).show();
    },
    openDialog1() {
      this.$cvDialogRender(
        dialogBody1,
        { title: '这个是弹窗的名字', class: 'js-dialog' },
        { defaultName: 'JSDialog传递的参数' },
        {
          openDialog2(chuandiData) {
            console.log('---走到这里了，准备', this);
            console.log('---走到这里了，传递的数据', chuandiData);
          }
          // openDialog2: (receiveData) => {
          //   console.log('---走到这里了，准备', receiveData);
          //   this.openDialog2();
          // },
        }
      ).show();
      // const dialog = new JSDialog({
      //   component: dialogBody,
      //   dialogOpts: {title: '这个是弹窗的名字',class: 'js-dialog'},
      //   props: {defaultName: 'JSDialog传递的参数'},
      //   onFunc: {
      //     openDialog2(chuandiData) {
      //       console.log('---走到这里了，准备', this);
      //       console.log('---走到这里了，传递的数据', chuandiData);
      //     },
      //     // openDialog2: (receiveData) => {
      //     //   console.log('---走到这里了，准备', receiveData);
      //     //   this.openDialog2();
      //     // },
      //   },
      //   onOK() {
      //     const inner = dialog.getInner() // 能取到dialogBody的引用
      //     // 控制流程
      //     if (inner.isCanSave()) {
      //       // 获取保存数据
      //       const postData = inner.getSaveData()
      //       console.log('>>>>> postData >>>>>', postData)
      //       // 关闭弹框
      //       dialog.close()
      //     }
      //   },
      //   onCancel() {
      //     dialog.close() // 弹框关闭
      //   }
      // })
      // dialog.show();
    },
    openDialog2() {
      const dialog = new JSDialog({
        component: dialogBody2,
        footer: {
          ok: {
            // 修改默认按钮
            text: '新增'
          },
          cancel: {
            // 隐藏默认按钮
            isHide: true
          },
          add: {
            // 新增按钮
            text: '另存为',
            clickFn() {
              dialog.close();
            },
            order: -1 // 控制按钮顺序，order小的显示在右边
          },
          add2: {
            text: '新增按钮2',
            clickFn() {
              dialog.close();
            },
            order: 3
          }
        }
      });
      dialog.show(); // 弹框显示
    }
  }
};
</script>

弹窗内部内容 dialogBody1

vue

<template>
  <div v-loading="isLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" style="height: 100%">
    <div style="width: 100%; height: calc(100% - 90px)">
      <div class="item">
        <div>名称</div>
        <el-input v-model="name"></el-input>
      </div>
      <div class="item">
        <el-radio-group v-model="attention">
          <el-radio value="已关注">已关注</el-radio>
          <el-radio value="等下关注">等下关注</el-radio>
        </el-radio-group>
      </div>
      <div class="item">
        <el-radio-group v-model="like">
          <el-radio value="已点赞">已点赞</el-radio>
          <el-radio value="等下点赞">等下点赞</el-radio>
        </el-radio-group>
      </div>
      <el-button @click="handleTitle">设置新的标题</el-button>
    </div>
    <!-- <el-dialog v-model="isShow" width="300" appendToBody>弹窗333</el-dialog> -->
    <div style="padding: 10px 20px 20px 0; text-align: right; box-sizing: border-box">
      <cv-btn-base @click="onClose">取 消</cv-btn-base>
      <cv-btn-base type="primary" @click="handleOk1">子弹窗</cv-btn-base>
      <cv-btn-base type="primary" @click="handleOk2">测试方法 openDialog2</cv-btn-base>
      <cv-btn-base type="primary" @click="onOK">确 定</cv-btn-base>
    </div>
  </div>
</template>

<script>
// import { reactive, toRefs } from '@vue/composition-api'
import { ElMessage } from 'element-plus';
import dialogBody2 from './dialogBody2.vue';
export default {
  props: {
    defaultName: String
  },
  data() {
    return {
      isLoading: true,
      name: this.defaultName, // 名称
      attention: '已关注', // 关注
      like: '已点赞', // 点赞
      formData: {
        a: 1,
        b: 2,
        c: 3
      },
      isShow: false
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      // 这边模拟请求数据
      setTimeout(() => {
        this.isLoading = false;
        this.isShow = true;
      }, 800);
    },
    handleTitle() {
      console.log('取消');
      this.$emit('setTitle', '我是新的标题');
    },
    handleOk1() {
      this.$cvDialogRender(
        dialogBody2,
        {
          title: '这个是子弹窗的名字222',
          class: 'js-dialog',
          // width: '400px',
          draggable: true,
          style: 'width: 400px;'
        },
        { defaultName: 'JSDialog传递的参数' },
        {
          openDialog2(chuandiData) {
            console.log('---走到这里了，准备', this);
            console.log('---走到这里了，传递的数据', chuandiData);
          }
          // openDialog2: (receiveData) => {
          //   console.log('---走到这里了，准备', receiveData);
          //   this.openDialog2();
          // },
        }
      ).show();
    },
    handleOk2() {
      console.log('内部11111');
      this.$emit('openDialog2');
      console.log('内部22222');
    },
    onOK() {},
    onClose() {
      this.$emit('close');
      // this.$emit('openDialog2', this.formData);
    },
    onNameBlur() {},
    // 保存前校验
    isCanSave() {
      const ATTENTIONED = '已关注';
      const LIKED = '已点赞';
      if (this.attention !== ATTENTIONED || this.like !== LIKED) {
        ElMessage.error('未关注或者点赞,不能关闭,嘻嘻');
        return false;
      }
      return true;
    },
    // 获取保存数据
    getSaveData() {
      // ******* lodash pick 从对象中抽取数据
      return {
        name: this.name,
        attention: this.attention,
        like: this.like
      };
    }
  }
};
</script>

弹窗内部内容 dialogBody2

vue

<template>
  <div v-loading="isLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
    <div style="width: 100%; height: 300px">
      <el-scrollbar style="height: 300px">
        <h2>我是第二个弹窗啊啊啊啊</h2>
        <div>------</div>
        <div class="item">
          <div>撒打算大</div>
          <cv-input-text v-model="formData.name" />
        </div>
        <div class="item">
          <el-radio-group v-model="attention">
            <el-radio value="已关注">已关注</el-radio>
            <el-radio value="等下关注">等下关注</el-radio>
          </el-radio-group>
        </div>
        <div class="item">
          <el-radio-group v-model="like">
            <el-radio value="已点赞">已点赞</el-radio>
            <el-radio value="等下点赞">等下点赞</el-radio>
          </el-radio-group>
        </div>
      </el-scrollbar>
    </div>
    <div style="padding: 10px 20px 20px 0; text-align: right; box-sizing: border-box">
      <cv-btn-base @click="handleClose">取 消</cv-btn-base>
      <cv-btn-base type="primary" @click="handleOk">确 定</cv-btn-base>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    defaultName: String
  },
  data() {
    return {
      isLoading: true,
      name: this.defaultName, // 名称
      attention: '已关注', // 关注
      like: '已点赞', // 点赞
      formData: {}
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      // 这边模拟请求数据
      setTimeout(() => {
        this.isLoading = false;
      }, 1400);
    },
    // 保存前校验
    handleOk() {
      this.$emit('close');
    },
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>
<style scoped>
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>

$cvDialogRender 全局方法参数说明 ¶

参数说明

字段	类型	注释
第1个参数 bodyComponent	子组件	需要加载的《弹窗内容》的组件
第2个参数 dialogOption	对象object	弹窗主体说明
第3个参数 propsOption	对象object	需要传入《弹窗内容》组件的props数据
第4个参数 onFunc	对象object	《弹窗内容》组件调用父页面绑定的方法

参数 bodyComponent 说明 ¶

参数 dialogOption 说明 ¶

字段	类型	默认	说明	参考
title	string	-	弹窗标题
width	string	-	弹窗宽度
drag	boolean	false	是否拖拽	true、false
closeIsConfirm	Boolean	false	关闭弹窗时，是否确认	true、false
closeIsDestroy	Boolean	true	关闭弹窗时，是否销毁	true、false
beforeClose	Function	null	关闭前事件

参数 propsOption 说明 ¶

参数 onFunc 说明 ¶

可以监听多个方法

$cvDialogRender 提供给 bodyComponent 弹窗内容调用的方法 ¶

方法	说明	参考
close	关闭弹窗
setTitle	设置标题

在 bodyComponent 弹窗内容组件里面，调用方式


this.$emit(方法名字,传递参数);

// 关闭弹窗
this.$emit('close');


// 设置弹窗标题
this.$emit('setTitle','这是一个新的弹窗标题');

流程 ¶

1、业务页面
-》唤起弹窗
标题、引入组件（先引入-写死）、是否显示、宽度、高度
-》

参考 ¶

动态业务处理弹窗 dialog-box
https://www.jb51.net/article/188191.htm
Vue中render函数子组件调用父组件
https://blog.csdn.net/weixin_42815873/article/details/121655043