ps-tcplayer/src/tccomponents/PlayPrevComponent/index.js

Tencent Cloud Player component with Vue2/Vue3 compatibility

import playPrevHtml from './index.html';
import './index.css';
import prevIcon from './prev.png';
import {parseDom, afterinsert} from '../../utils'

export default class PlayPrevComponent {
    constructor(player, clickHandle) {
        this.player = player;
        this.clickHandle = clickHandle;
        this.$html = parseDom(playPrevHtml);
    }
    createEl(el) {
        if (this.clickHandle) {
            this.$html.onclick = () => {
                if(typeof this.clickHandle == 'function') {
                    this.clickHandle()
                }else if(typeof this.clickHandle == 'string'){
                    window.location.href = this.clickHandle;
                }
            }
            this.$html.style.backgroundImage = `url(${prevIcon})`;

            const beforeNode = el.querySelector('.vjs-play-control')
            afterinsert(this.$html, beforeNode)
        }
    } 
    dispose(){
        this.$html.parentNode.removeChild(this.$html)
    }
}