首页 前端知识 Vue3中为Ant Design Vue中Modal.confirm自定义内容

Vue3中为Ant Design Vue中Modal.confirm自定义内容

2024-08-12 10:08:01 前端知识 前端哥 196 511 我要收藏

在一次业务开发时代码时,碰到了一种既想要Modal.confirm样式,又想要定制其content内容的情况。

大部分情况下,使用Modal.method()这种方式时,可能content内容固定都是字符串,那如果想要做更高级的交互怎么办?查阅 Ant Design Vue官方文档,发现content可以不仅仅是字符串:
请添加图片描述
可以看到content是可以接收VNode或h函数的,下面分别讲解,这两种参数的用法

VNode形式

1、创建一个组件

<template>
  <div class="d-flex">
    <span>{{ props.text }}</span>
    <img src="https://pic.616pic.com/ys_img/00/31/95/oGv09XRm2b.jpg" class="jc-arrow" @click="onClickSetting" />
  </div>
</template>
<script setup lang="ts">
export interface Props {
  text: string;
}
const props = withDefaults(defineProps<Props>(), {
  text: undefined,
});

const onClickSetting = () => {
  console.log('click setting');
};
</script>
<style lang="less" scoped>
.jc-arrow {
  width: 20px;
  height: 20px;
}
</style>

2、在需要使用的地方引入该组件,并且从Vue中引入createVNode函数

// 引入组件
import JumpConfirm from './JumpConfirm.vue';
// 引入函数
import { createVNode } from 'vue';
  1. 调用
state.modal = Modal.confirm({
   title: '模态框title',
   content: createVNode(JumpConfirm, {
     text: '重置',
   }),
   centered: true,
   okText: countdownText.value,
   onOk: async () => {
     clearCountdown();
   },
   onCancel: () => {
     clearCountdown();
   },
 });

createVNode第一个参数传的是组件,第二个参数传的是组件需要的props。

比如我上面的组件定义了接收Props在组件中使用,所以我这里第二个参数传的就是我前面定义的Props需要的参数

4、效果
请添加图片描述

h函数形式

h函数用法请参考官方文档:https://vue3js.cn/global/h.html

const builtIns = ['模板1', '模板2', '模板3', '模板4'];
Modal.confirm({
  title: '以下模板不可删除',
  centered: true,
  content: h(
    'div',
    {
      style: {
        'max-height': '200px',
        'overflow-y': 'auto',
      },
    },
    [h('p', {class: 'c-t05 font-xs'}, '内置模板'), h('p', {class: 'c-t01 font-13'}, builtIns.join(','))]
  ),

请添加图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15377.html
标签
评论
发布的文章

jQuery Knob 项目教程

2024-08-19 22:08:18

jquery 实现倒计时

2024-08-19 22:08:06

echarts柱状图属性

2024-08-19 22:08:57

word模版导出(echarts)ftl

2024-08-19 22:08:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!