likes
comments
collection
share

vue3 命名式（函数式）弹窗最优解在一些场景中，比如我们封装的一些工具函数、hooks、插件等中没办法像在单文件组件中

作者站长头像
站长
· 阅读数 21

公众号文章地址： mp.weixin.qq.com/s/JIMAn3ike…

写在前面

最近开发合同模版编辑器中遇到一个场景，需要自研很多富文本编辑器tinymce plugin。这其中就会需要在.ts文件中通过命令式的方式调起弹窗Dialog。弹窗内容比较丰富，用tinymce自带的对话框无法较好的满足需求。于是就有了今天这篇文章。

背景

什么是命令式（也可以称为函数式）弹窗呢？通常我们在vue的开发中想要使用弹窗，会先在<template>中定义好<dialog>元素，然后利用变量来控制dialog的显示隐藏，这种属于声明式弹窗。但是在一些场景中，比如我们封装的一些工具函数、hooks、插件等中没办法像在单文件组件中一样将dialog写到template中，或者一些公共的弹窗使用声明式弹窗会比较臃肿，这个时候命名式的调起弹窗就派上用场了。

常规声明式弹窗使用方法

下面是最常见的弹窗使用方法，我们借用element-plus的弹窗组件来说明。其实这种常规的方式本身也是有一些缺点的。比如每个Dialog都需要为其创建单独的变量去控制它的显示隐藏，如果只是额外维护一个变量这也不是不能接受，可是当同样的Dialog组件，即需要在父组件控制它的展示与隐藏，又需要在子组件中控制，这样整个项目代码里面就会出现很多这种变量，显得很冗余。

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

</script>
<template>
  <el-button plain @click="dialogVisible = true">
    Click to open the Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    :before-close="handleClose"
  >
    <span>This is a dialog content</span>
  </el-dialog>
</template>

el-dialog本身是不支持命令式调用的。

命令式弹窗

命令式弹窗应该是什么样的形式呢？我们拿element-plus来说明。

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}
</script>

<template>
  <el-button plain @click="open">Click to open the Message Box</el-button>
</template>

ElMessageBox.alert()这种形式就是一个命令式弹窗的调用方式，但是ElMessageBox只能支持简单的内容弹窗。当我们的弹窗内容比较复杂时如何使用命令式弹窗呢？

ElMessageBox的VNode用法和html片段的方法也是无法满足我们的复杂弹窗需求的

这个时候就需要我们自己封装一些方法来比较优雅/方便的使用弹窗。

命令式弹窗理想的使用效果

<script setup lang="ts">
import { ElButton } from 'element-plus';

import Comp from 'components/Comp.vue';
import MyDialog from 'components/MyDialog.vue';

// 不需要额外的变量控制弹窗
const handleOpenDialog = () => {
  // 处理 MyDialog
};
</script>

<template>
  <div>
    <ElButton @click="handleOpenDialog"> 打开弹窗 </ElButton>
    <div>其他内容。。。 </div>
  </div>
  // 不需要将MyDialog声明到template中
</template>

四个重点：

  1. 父组件使用Dialog不需要额外的变量控制
  2. 不需要将Dialog声明到template中
  3. Dialog组件可以以单独的单文件组件形式（.vue）进行封装。这一点其实很重要，因为这是最简单的弹窗组件封装形式
  4. Dialog的处理可以直接在函数中进行

可能的实现方法

命令式Dialog的实现方法有很多，这边我们先来列举一些常用的实现方法。

方法一

// showMyDialog.ts文件
import { createApp } from 'vue'
import MyDialog from 'components/MyDialog.vue';

const showMyDialog = () => {
  const div = document.createElement('div');
  document.body.appendChild(div);
  const app = createApp(MyDialog);
  app.mount(div)
}

export default showMyDialog

MyDialog组件与showMyDialog是两个文件，增加了维护的成本。

方法二

利用.tsx文件特性，将Dialog和showDialog合并到一个文件。 同时利用@styils/vue来方便写元素的样式。

// MyDialog.tsx文件。
import { createApp } from "vue";
import { ElButton } from "element-plus";
import { styled } from "@styils/vue";

const DivModal = styled('div', {
  position: 'fixed',
  width: '100%',
  height: '100%',
  // 其他css
});

const DivBox = styled('div', {
  display: 'flex',
  minWidth: '25%',
});

const DivText = styled('div', {
  marginBottom: '1em'
});

const DialogBox = {
  props: {
    msg: {
      type: String,
      required: true
    },
  },
  render(ctx: any) {
    const { $props, $emit } = ctx;
    return (
      <DivModal class= "modal" >
      <DivBox class="box" >
        <DivText class="text" > { $props.msg } </DivText>
        <div onClick = { $emit('onClick(e)') } >
          <ElButton type="primary" > 确 定 </ElButton>
        </div>
        </DivBox>
      </DivModal>
    );
    },
};

export function showDialog(props) {
  const div = document.createElement("div");
  document.body.appendChild(div);
  const app = createApp(DialogBox,
    {
      ...props,  
    }
  );
  app.mount(div);
};

这种方法看似挺好，也解决了命令式弹窗的一些问题。但是仔细想想，也存在以下一些问题。

  1. .tsx的写法可能与许多项目默认的template写法不一致，为了个弹窗就混用，有些团队的规范可能不容易接受
  2. 本身这种写法的就不够方便，项目中一般会出现很多Diaolog，都用这种方法写，想想就头疼
  3. 已经存在的声明式弹窗，无法兼容处理，需要全部重构。

终极方法思考

上面的方法其实已经可以解决命令是Dialog的问题了，但是我们为什么不满足于使用上面的方法呢? 思考以下问题。

  1. 能不能不改变Dialog本身template的封装方式，因为这种写法最方便
  2. 同时能使用命令式的方式调用Dialog

这里我们考虑封装一个hook,当然其实封装在utils里面也是可以的。利用这个hook可以将已经存在的业务MyDialog转化成命令式的调用方式。

终极方法useDialog封装

使用方法

<script setup lang="ts">
import { ElButton } from 'element-plus';
import MyDialog from 'components/MyDialog.vue';

const myDialog = useDialog(MyDialog);

const handleOpenDialog = () => {
  // 打开弹窗 
  myDialog({
    // 传入一些myDialog 需要的 props
    title: "弹窗标题",
    onSubmit: () => {
        // 弹窗的回调处理，如果有的话
    },
    onClose: () =>{
        // close 回调 ， 如果需要的话
    }
  })
  // myDialog.close()可以关闭弹窗
};
</script>

<template>
  <div>
    <ElButton @click="handleOpenDialog"> 打开弹窗 </ElButton>
    <div>其他内容。。。 </div>
  </div>
  // 不需要将MyDialog声明到template中
</template>

MyDialog 封装举例

大家在封装自己的业务Dialog时基本上也是按照这种方式进行封装的，高效快捷。

<script setup lang="ts" name="MyDialog">
const props = defineProps<{
  visible: boolean;
  title?: string;
  onConfirm: (imgSrc: string, imgId: number) => void;
}>()
const emits = defineEmits<{
  close: [],
}>()
const dialogVisible = ref(false)

// 取消选择
const cancel = () => {
  dialogVisible.value = false
}

// 确认选择
const confirm = () => {
  // 其他逻辑
  props?.onConfirm()
  cancel()
}

const dialogVisible = computed<boolean>({
  get() {
    return props.visible;
  },
  set(visible) {
    emits('update:visible', visible);
    if (!visible) {
      emits('close');
    }
  },
});

</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="props.title"
    width="800"
    :before-close="cancel"
  >
    <div>
      弹窗内容
    </div>

    <template #footer>
      <el-button @click="cancel">
        取消
      </el-button>
      <el-button type="primary" @click="confirm">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

Dialog封装规范

  1. props中含有visible
  2. emits一个close事件

useDialog实现源码

import { AppContext, Component, ComponentPublicInstance, createVNode, getCurrentInstance, render, VNode } from 'vue';

export interface Options {
  visible?: boolean;
  onClose?: () => void;
  appendTo?: HTMLElement | string;
  [key: string]: unknown;
}

export interface DialogComponent {
  (options: Options): VNode;
  close: () => void;
}

const getAppendToElement = (props: Options): HTMLElement => {
  let appendTo: HTMLElement | null = document.body;
  if (props.appendTo) {
    if (typeof props.appendTo === 'string') {
      appendTo = document.querySelector<HTMLElement>(props.appendTo);
    }
    if (props.appendTo instanceof HTMLElement) {
      appendTo = props.appendTo;
    }
    if (!(appendTo instanceof HTMLElement)) {
      appendTo = document.body;
    }
  }
  return appendTo;
};

const initInstance = <T extends Component>(
  Component: T,
  props: Options,
  container: HTMLElement,
  appContext: AppContext | null = null
) => {
  const vNode = createVNode(Component, props);
  vNode.appContext = appContext;
  render(vNode, container);

  getAppendToElement(props).appendChild(container);
  return vNode;
};

export const useDialog = <T extends Component>(Component: T): DialogComponent => {
  const appContext = getCurrentInstance()?.appContext;
  if (appContext) {
    const currentProvides = (getCurrentInstance() as any)?.provides;
    Reflect.set(appContext, 'provides', { ...appContext.provides, ...currentProvides });
  }

  const container = document.createElement('div');

  const close = () => {
    render(null, container);
    container.parentNode?.removeChild(container);
  };

  const DialogComponent = (options: Options): VNode => {
    if (!Reflect.has(options, 'visible')) {
      options.visible = true;
    }
    if (typeof options.onClose !== 'function') {
      options.onClose = close;
    } else {
      const originOnClose = options.onClose;
      options.onClose = () => {
        originOnClose();
        close();
      };
    }
    const vNode = initInstance<T>(Component, options, container, appContext);
    const vm = vNode.component?.proxy as ComponentPublicInstance<Options>;
    for (const prop in options) {
      if (Reflect.has(options, prop) && !Reflect.has(vm.$props, prop)) {
        vm[prop as keyof ComponentPublicInstance] = options[prop];
      }
    }
    return vNode;
  };

  DialogComponent.close = close;

  return DialogComponent;
};

export default useDialog;

关键代码说明：

  1. getAppendToElement方法支持从props中传递appendTo来自定义Dialog的挂载位置。默认挂载到document.body。
  2. initInstance方法主要利用了createVNode和render函数将目标Dialog挂载到DOM树中，也就是渲染Dialog。
  3. createVNode参考vue3官方文档：vuejs.org/guide/extra…
  4. getCurrentInstance()?.appContext
    const appContext = getCurrentInstance()?.appContext;
  if (appContext) {
    const currentProvides = (getCurrentInstance() as any)?.provides;
    Reflect.set(appContext, 'provides', { ...appContext.provides, ...currentProvides });
  }

上面这段代码主要是兼容Provide / Inject场景，使数据不丢失。 另外getCurrentInstance方法在2021-08月份后的vue官方文档中已经移除了，但是该方法还是可以使用。

  1. DialogComponent.close = close 将close方法挂载到DialogComponent上，方便myDialog.close()这种方式直接关闭弹窗。

总结

其实将useDialog命名为useComponent。你就会发现该hook不光适用于Dialog。其他非Dialog组件也适用。useComponent就是一个命令式组件的中转器。

注意

如果const myDialog = useDialog(ImageSelectDialog)方法是直接在<script setup lang="ts" name="">下面调用的那么provide/inject能正常访问。 如果const myDialog = useDialog(ImageSelectDialog)是在XXX.ts文件里面调用的，然后import到<script setup lang="ts" name="">下面，则provide/inject不能正常访问。

转载自:https://juejin.cn/post/7402926506543267851
评论
请登录