element-plus中ElmessageBox弹窗内容进行vnode操作

前言

在工作中遇到elmessagebox这个组件内容改变遇到的问题。elmessageBox大部分message部分为纯文字，但是也难免像我目前一样需要存入input框类似的功能。我自己琢磨了有一会才写出来，所以做个记录。

目的

我的目的是为了实现类似于一个获取验证码验证的功能。如图：

实现

打开’取消‘按钮为showCancelButton。

message识别vnode结构为dangerouslyUseHTMLString。

这样就可以使用h(),可以进行识别vnode结构，我们需要引用Elform中时就可以从elementPlus中导入进来。而其中最重要的功能为input标签，如下代码实现：

import { h } from 'vue'
import { ElMessage, ElMessageBox, ElForm, ElFormItem, ElButton } from 'element-plus'
const paramsForm = ref<any>({ code :''})
ElMessageBox({
        title: '验证安全手机',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        dangerouslyUseHTMLString: true,
        message: h('div', null, [
            h('div', null, `验证码将发送到手机 ${props.phoneNumber}`),
            h('div', { style: 'color:#ccc;margin-bottom:20px;' }, `如果长时间未收到验证码，请检查是否将运营商拉黑`),
            h(ElForm, { modelValue: paramsForm.value }, [
                h(ElFormItem, { label: '填写验证码：', prop: 'code' }, [
                    h('div', { style: "display:flex" }, [
                        h("input", {
                            value: paramsForm.value.code,
                            id: "hinput",
                            oninput: paramsForm.value.code,
                            placeholder: "验证码六位",
                        }),
                        h(ElButton, { onClick: handleCode, id: 'codeId' }, '获取验证码')
                    ])
                ])
            ])
        ])
    })

其他

我们获取到验证码后将进行倒计时，而这个功能如何实现呢？

如下代码：

const props = defineProps(['phoneNumber'])
const ifhandleCode = ref(false)
const ifqueryCode = ref('')
const timer = ref<any>()
const num = ref(60)

// 获取验证码
const handleCode = async () => {
//获取验证码的接口，传入电话号码
       await sendCode(props.phoneNumber).then((res) => {
           if (res.data.type === "success") {
                // 打开锁
                ifhandleCode.value = true
                const object = JSON.parse(res.data.result)
                // 将验证码写入本地，后面进行对比验证是否输入正确
                ifqueryCode.value = object.obj
                // 进行倒计时
                timers()
            }
        })
}

// 倒计时函数
const timers = () => {
    // 获取到真实dom id为codeId，上面代码有id标识
    const code = document.getElementById('codeId') as any
    // 当num为0时
    if (num.value <= 0) {
        clearTimeout(timer.value)
        ifhandleCode.value = false
        num.value = 60
        code.children[0].innerHTML = '获取验证码'
    } else {
        // 判断锁是否开的情况
        if (ifhandleCode.value) {
            num.value = num.value - 1
            // 倒计时内容
            code.children[0].innerHTML = num.value + 's'
            // 形成闭包
            timer.value = setTimeout(() => {
                timers()
            }, 1000)
        }
    }
}

最后

在ElmessageBox内实现对dom操作就是这样实现的，感谢观看~~