我們以vant 日歷組件為例, 向彈窗底部添加一個重置按鈕

方法1: 元素添加

創(chuàng)建按鈕元素, 將其添加至目標節(jié)點

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)
    }
})

方法2: 組件添加

將按鈕組件添加至目標節(jié)點

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,
        )
    }
})