Vue 将某个元素或组件挂载到指定节点

我们以vant 日历组件为例, 向弹窗底部添加一个重置按钮

创建按钮元素, 将其添加至目标节点

this.$nextTick(() => {
    const resetEl = document.getElementById(
        'calendarResetButton',
    )

    if (!resetEl) {
        const footerEl = document.getElementsByClassName(
            'van-calendar__footer',
        )[0]
        const button = document.createElement('button')

        button.setAttribute('type', 'button')
        button.setAttribute('id', 'calendarResetButton')
        button.setAttribute(
            'class',
            'rest-button van-button van-button--info van-button--normal van-button--block van-button--round van-calendar__confirm',
        )
        button.innerHTML = '重置'
        button.addEventListener('click', this.resetDate)

        footerEl.insertAdjacentElement('afterbegin', button)
    }
})

将按钮组件添加至目标节点

this.$nextTick(() => {
    const resetEl = document.getElementById(
        'calendarResetButton',
    )

    if (!resetEl) {
        const footerEl = document.getElementsByClassName(
            'van-calendar__footer',
        )[0]
        const resetBtn = new Vue({
            el: document.createElement('div'),
            render: h => {
                return h('van-button', {
                    props: {
                        text: '重置',
                        type: 'info',
                        round: true,
                    },
                    attrs: {
                        id: 'calendarResetButton',
                    },
                    style: {
                        color: '#fff',
                    },
                    on: {
                        click: this.resetDate,
                    },
                })
            },
        })

        footerEl.insertAdjacentElement(
            'afterbegin',
            resetBtn.$el,
        )
    }
})