4.0.5

packages/artplayer/examples/react/Artplayer.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Artplayer from '../../';
+
+export default class ArtplayerReact extends React.Component {
+    constructor(props) {
+        super(props);
+        this.instance = null;
+        this.artRef = React.createRef();
+    }
+
+    componentDidMount() {
+        const { option, getInstance } = this.props;
+        this.instance = new Artplayer({
+            ...option,
+            container: this.artRef.current,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(this.instance);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.instance && this.instance.destroy) {
+            this.instance.destroy();
+        }
+    }
+
+    render() {
+        const { option, getInstance, ...rest } = this.props;
+        return React.createElement('div', {
+            ref: this.artRef,
+            ...rest,
+        });
+    }
+}

packages/artplayer/examples/vue/Artplayer.vue

@@ -0,0 +1,36 @@
+<template>
+    <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from '../../';
+
+export default {
+    data() {
+        return {
+            instance: null,
+        };
+    },
+    props: {
+        option: {
+            type: Object,
+            required: true,
+        },
+    },
+    mounted() {
+        this.instance = new Artplayer({
+            ...this.option,
+            container: this.$refs.artRef,
+        });
+
+        this.$nextTick(() => {
+            this.$emit('get-instance', this.instance);
+        });
+    },
+    beforeUnmount() {
+        if (this.instance && this.instance.destroy) {
+            this.instance.destroy();
+        }
+    },
+};
+</script>