feat(视频播放器；首页歌单卡片；进度条组件；): 优化窗口大小变化可能带来的UI错乱(ResizeObserver)

Author: xiaozhu188

CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.2.2](https://github.com/xiaozhu188/electron-vue-cloud-music/compare/v1.2.1...v1.2.2) (2021-03-14)
+
+范围|描述|commitId
+--|--|--
+ - | 1.2.2 | [1139699](https://github.com/xiaozhu188/electron-vue-cloud-music/commit/1139699)
+
+
+### 🐛 Bug 修复
+范围|描述|commitId
+--|--|--
+ - | 修复windows打包缺失图标导致失败并启用asar | [e322843](https://github.com/xiaozhu188/electron-vue-cloud-music/commit/e322843)
+
 ## [1.2.1](https://github.com/xiaozhu188/electron-vue-cloud-music/compare/v1.1.22...v1.2.1) (2021-03-14)
 
 范围|描述|commitId

src/renderer/components/Common/progressBar.vue

@@ -2,6 +2,7 @@
     <div
         class="progress-bar"
         ref="progressBar"
+        v-resize:[debounceOptions].debounce="handleResize"
         @click.prevent.stop="progressClick"
     >
         <div
@@ -36,6 +37,7 @@ import { debounce } from "@/utils/dom";
 export default {
     name: "progressBar",
     data() {
+        this.debounceOptions = { wait: 50 };
         this.mouse = {}; // 记录鼠标位置，是否按下等信息
         return {
             bufferedOffsetWidth: 0,
@@ -64,29 +66,25 @@ export default {
             default: false,
         },
     },
-    destroy() {
-        window.removeEventListener("resize", debounce(this.handleResize, 50));
-    },
     mounted() {
         this.changeProgressbarWidth(this.percent);
-        let _this = this;
-        window.addEventListener("resize", debounce(this.handleResize, 50));
+
         const virtualBar = this.$refs.virtualBar;
         virtualBar.addEventListener(
             "mousemove",
-            debounce(function (e) {
+            debounce((e) => {
                 e.stopPropagation();
-                const progressBar = _this.$refs.progressBar;
+                const progressBar = this.$refs.progressBar;
                 let pageX = e.pageX;
                 let diff = pageX - progressBar.getBoundingClientRect().left;
                 let percent = (diff / progressBar.clientWidth).toFixed(2);
-                _this.$emit("virtualBarMove", { pageX, percent });
+                this.$emit("virtualBarMove", { pageX, percent });
             }, 200)
         );
         virtualBar.addEventListener(
             "mouseleave",
-            debounce(function (e) {
-                _this.$emit("virtualBarLeave");
+            debounce(() => {
+                this.$emit("virtualBarLeave");
             }, 200)
         );
     },

src/renderer/directives/index.js

@@ -1,4 +1,5 @@
 import Vue from "vue";
+import { debounce, throttle } from "loadsh";
 
 // 点击元素之外隐藏该元素
 Vue.directive("clickOutside", {
@@ -18,3 +19,29 @@ Vue.directive("clickOutside", {
         delete el.__vueClickOutside__;
     },
 });
+
+// 监听元素大小变化
+Vue.directive("resize", {
+    bind(el, binding) {
+        let { value, modifiers, arg } = binding;
+        console.log(modifiers, arg);
+        const callback = (entries) => {
+            value(entries[0]);
+        };
+        const [method] = Object.keys(modifiers);
+        const wait = (arg && arg.wait) || 300;
+        if (method && method === "throttle") {
+            el._observer = new ResizeObserver(throttle(callback, wait));
+        } else {
+            el._observer = new ResizeObserver(debounce(callback, wait));
+        }
+    },
+    inserted(el) {
+        Vue.nextTick(() => {
+            el._observer && el._observer.observe(el);
+        });
+    },
+    unbind(el) {
+        el._observer && el._observer.unobserve(el);
+    },
+});

src/renderer/views/Home/components/playlist.vue

@@ -1,14 +1,19 @@
 <template>
     <div class="playlist">
         <ul class="list">
-            <li class="list-item" @click="goLink" v-if="userId">
+            <li
+                class="list-item"
+                @click="goLink"
+                v-resize:[throttleOption].throttle="onResize"
+                v-if="userId"
+            >
                 <div class="date">
                     <div class="info">
                         <div class="week">{{ getWeek() }}</div>
                         <div class="day">{{ getDate() }}</div>
                     </div>
                 </div>
-                <div>每日歌曲推荐</div>
+                <div class="name">每日歌曲推荐</div>
             </li>
             <list-item
                 class="list-item"
@@ -41,6 +46,10 @@ export default {
             },
         },
     },
+    data() {
+        this.throttleOption = { wait: 100 };
+        return {};
+    },
     computed: {
         ...mapGetters("User", ["userId"]),
         playlist() {
@@ -51,6 +60,9 @@ export default {
         listItem,
     },
     methods: {
+        onResize({ target }) {
+            target.style.fontSize = `${target.clientWidth}px`;
+        },
         getWeek() {
             return "星期" + "日一二三四五六".charAt(new Date().getDay());
         },
@@ -91,17 +103,21 @@ export default {
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
-                line-height: 1.1;
+                line-height: 1;
                 background: #fff;
                 .week {
-                    font-size: 22px;
+                    font-size: 0.15em;
                 }
                 .day {
-                    font-size: 90px;
+                    font-size: 0.56em;
                     color: @primary-color;
                 }
             }
         }
+        .name {
+            padding: 4px;
+            font-size: 13px;
+        }
         &:hover {
             .copywriter {
                 transform: translateY(0);

src/renderer/views/Video/player.vue

@@ -14,7 +14,11 @@
                         <a-button size="small" @click="showMain"
                             >打开主界面</a-button
                         >
-                        <div class="title js-video-title" v-if="videoData.name">
+                        <div
+                            class="title js-video-title"
+                            v-resize="onResize"
+                            v-if="videoData.name"
+                        >
                             <div class="inner js-video-title-inner"
                                 >{{ videoData.name }} {{ videoData.desc }}</div
                             >
@@ -414,7 +418,7 @@ export default {
         volume(newVal) {
             const video = this.$refs.video;
             newVal = Number(newVal);
-            if (newVal == 0) {
+            if (newVal === 0) {
                 this.$store.commit("play/SET_MUTED", true);
             }
             this.$nextTick(() => {
@@ -544,15 +548,11 @@ export default {
                 this.isFullScreen = false;
             }
         });
-
-        this.$refs.videoIntro.addEventListener(
-            "transitionend",
-            debounce(this.handleResize, 300)
-        );
-
-        win.on("resize", debounce(this.handleResize, 300));
     },
     methods: {
+        onResize(data) {
+            this.handleResize();
+        },
         showMoreList(type) {
             if (type === "br") {
                 this.isShowBrs = !this.isShowBrs;