$cvDrawerRender 动态抽屉 ¶

简要 ¶

动态抽屉
render

示例 ¶

::: demo

vue

<template>
  <div>
    <cv-btn-base @click="openDialog1">测试打开抽屉1</cv-btn-base>
    <cv-btn-base @click="openDialogTable">测试打开抽屉2-加载列表框</cv-btn-base>
    <cv-btn-base @click="openDialogEditor">测试打开抽屉3-加载编辑期</cv-btn-base>
  </div>
</template>
<script setup>
import { cvDrawerRender } from '../../../lib/cv-ui.js';
import { getCurrentInstance } from 'vue';
// 获取当前组件实例
const instance = getCurrentInstance();
// 从实例中获取全局属性
const appVue = instance.appContext.app;
console.log(instance);
function openDialog1() {
  cvDrawerRender(
    appVue,
    // 抽屉body，需要展示的内部内容的组件
    drawerBody1,
    // 抽屉的属性
    {
      title: '这个是弹窗的名字',
      size: '100%',
      class: 'js-drawer',
      beforeClose: (done) => {
        console.log('guanbi前的操作');
        done();
      }
    },
    // 传递给内部页面的参数，内部用props接收
    { props1: 'JSDialog传递的参数', props2: '这个是传递进来的222' },
    // 这些是【内部】 this.$emit()调用的方法
    {
      inside_call_func1(chuandiData) {
        console.log('---内部调用了方法1，传递回来的数据 chuandiData :', chuandiData);
      },
      inside_call_func2: (receiveData) => {
        console.log('---内部调用了方法2，传递回来的数据 receiveData :', receiveData);
      }
    }
  ).show();
}
</script>
<script>
import drawerBody1 from './renderJsx/drawerBody1.vue';
import drawerBody2 from './renderJsx/drawerBody2.vue';
import dialogCompTable from './renderJsx/dialogCompTable.vue';
import dialogEditor from './renderJsx/dialogEditor.vue';
export default {
  data() {
    return {};
  },
  methods: {
    // openDialog1() {
    //   cvDrawerRender(
    //     instance.vnode,
    //     // 抽屉body，需要展示的内部内容的组件
    //     drawerBody1,
    //     // 抽屉的属性
    //     {
    //       title: '这个是弹窗的名字',
    //       class: 'js-drawer',
    //       beforeClose: (done) => {
    //         console.log('guanbi前的操作');
    //         done();
    //       }
    //     },
    //     // 传递给内部页面的参数，内部用props接收
    //     { props1: 'JSDialog传递的参数', props2: '这个是传递进来的222' },
    //     // 这些是【内部】 this.$emit()调用的方法
    //     {
    //       inside_call_func1(chuandiData) {
    //         console.log('---内部调用了方法1，传递回来的数据 chuandiData :', chuandiData);
    //       },
    //       inside_call_func2: (receiveData) => {
    //         console.log('---内部调用了方法2，传递回来的数据 receiveData :', receiveData);
    //       }
    //     }
    //   ).show();
    // },
    openDialogTable() {
      this.$cvDrawerRender(
        // 抽屉body，需要展示的内部内容的组件
        dialogCompTable,
        // 抽屉的属性
        { title: '这个是弹窗的名字', class: 'js-drawer' },
        // 传递给内部页面的参数，内部用props接收
        { defaultName: 'JSDialog传递的参数' },
        // 这些是【内部】 this.$emit()调用的方法
        {
          inside_call_func1(chuandiData) {
            console.log('---内部调用了方法1，传递回来的数据 chuandiData :', chuandiData);
          },
          inside_call_func2: (receiveData) => {
            console.log('---内部调用了方法2，传递回来的数据 receiveData :', receiveData);
          }
        }
      ).show();
    },
    openDialogEditor() {
      this.$cvDrawerRender(
        // 抽屉body，需要展示的内部内容的组件
        dialogEditor,
        // 抽屉的属性
        {
          title: '编辑器',
          class: 'js-drawer',
          direction: 'btt',
          size: '100%',
          beforeClose: (done) => {
            console.log('---呵呵---');
            done();
          }
        },
        // 传递给内部页面的参数，内部用props接收
        { defaultName: 'JSDialog传递的参数' },
        // 这些是【内部】 this.$emit()调用的方法
        {
          inside_call_func1(chuandiData) {
            console.log('---内部调用了方法1，传递回来的数据 chuandiData :', chuandiData);
          },
          inside_call_func2: (receiveData) => {
            console.log('---内部调用了方法2，传递回来的数据 receiveData :', receiveData);
          }
        }
      ).show();
    }
  }
};
</script>

:::

抽屉内部内容 drawerBody1

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('inside_call_func1', '内部调用外部定义的方法');
      this.$emit('inside_call_func2', '内部调用外部定义的方法');
      this.$emit('close');
    },
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>
<style scoped>
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.js-dialog .el-drawer__body {
  padding: 20px;
}
</style>

抽屉内部内容 drawerBody2

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.$confirm('确认关闭？')
        .then((_) => {
          this.$emit('close');
        })
        .catch((_) => {});
    }
  }
};
</script>
<style scoped>
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>

$cvDrawerRender 全局方法参数说明 ¶

参数说明

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

参数 bodyComponent 说明 ¶

参数 dialogOption 说明 ¶

字段	类型	默认	说明	参考
title	string	-	抽屉标题
size	string	40%	抽屉大小	40%
direction	string	rtl	抽屉打开方向	rtl(右向左) / ltr(左向右) / ttb(上向下) / btt(下向上)
closeIsConfirm	Boolean	true	关闭抽屉时，是否确认	true、false
closeIsDestroy	Boolean	true	关闭抽屉时，是否销毁	true、false
beforeClose	Function	null	关闭前事件

参数 propsOption 说明 ¶

参数 onFunc 说明 ¶

可以监听多个方法

$cvDrawerRender 提供给 bodyComponent 抽屉内容调用的方法 ¶

方法	说明	参考
close	关闭抽屉
setTitle	设置标题

在 bodyComponent 抽屉内容组件里面，调用方式


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

// 关闭抽屉
this.$emit('close');


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