经营地址怎么在国税网站做更改,如何建立网站模板,网站辅助导航,营销型网站建设设计6在一次业务开发时代码时#xff0c;碰到了一种既想要Modal.confirm样式#xff0c;又想要定制其content内容的情况。
大部分情况下#xff0c;使用Modal.method()这种方式时#xff0c;可能content内容固定都是字符串#xff0c;那如果想要做更高级的交互怎么办#xff…在一次业务开发时代码时碰到了一种既想要Modal.confirm样式又想要定制其content内容的情况。
大部分情况下使用Modal.method()这种方式时可能content内容固定都是字符串那如果想要做更高级的交互怎么办查阅 Ant Design Vue官方文档发现content可以不仅仅是字符串 可以看到content是可以接收VNode或h函数的下面分别讲解这两种参数的用法
VNode形式
1、创建一个组件
templatediv classd-flexspan{{ props.text }}/spanimg srchttps://pic.616pic.com/ys_img/00/31/95/oGv09XRm2b.jpg classjc-arrow clickonClickSetting //div
/template
script setup langts
export interface Props {text: string;
}
const props withDefaults(definePropsProps(), {text: undefined,
});const onClickSetting () {console.log(click setting);
};
/script
style langless scoped
.jc-arrow {width: 20px;height: 20px;
}
/style2、在需要使用的地方引入该组件并且从Vue中引入createVNode函数
// 引入组件
import JumpConfirm from ./JumpConfirm.vue;
// 引入函数
import { createVNode } from vue;调用
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())]),
