分离template

packages/artplayer/src/controls/index.js

@@ -139,7 +139,7 @@ export default class Controls {
 
     add(item, callback) {
         const option = typeof item === 'function' ? item(this.art) : item;
-        const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
+        const { $progress, $controlsLeft, $controlsRight } = this.art.template;
         let parent;
         switch (option.position) {
             case 'top':
@@ -161,12 +161,12 @@ export default class Controls {
     }
 
     show() {
-        const { $player } = this.art.refs;
+        const { $player } = this.art.template;
         $player.classList.add('artplayer-controls-show');
     }
 
     hide() {
-        const { $player } = this.art.refs;
+        const { $player } = this.art.template;
         $player.classList.remove('artplayer-controls-show');
     }
 }

packages/artplayer/src/controls/progress.js

@@ -2,7 +2,7 @@ import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
 
 export function getPosFromEvent(art, event) {
     const {
-        refs: { $progress },
+        template: { $progress },
         player,
     } = art;
     const { left } = $progress.getBoundingClientRect();

packages/artplayer/src/controls/thumbnails.js

@@ -6,7 +6,7 @@ export default function thumbnails(controlOption) {
         ...controlOption,
         mounted: $control => {
             const {
-                refs: { $progress },
+                template: { $progress },
                 events: { proxy, loadImg },
             } = art;
             let loading = false;