From 5159103ffec9a69799dee3d6fa96bd7d2b1354e8 Mon Sep 17 00:00:00 2001 From: skmcj <2604597248@qq.com> Date: Wed, 28 May 2025 15:57:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E4=BA=86=E4=B8=80?= =?UTF-8?q?=E4=B8=AA=E7=BB=84=E4=BB=B6=20=20-=20=E9=87=8D=E6=96=B0?= =?UTF-8?q?=E5=B0=81=E8=A3=85=E4=BA=86=E4=B8=80=E4=B8=AA=E9=80=9A=E7=9F=A5?= =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=94=A8=E4=BA=8E?= =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E5=8E=9F=E6=9D=A5=E7=9A=84=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E9=80=9A=E7=9F=A5=E7=BB=84=E4=BB=B6=20SkMessage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- env.d.ts | 31 --- index.html | 1 - public/skmessage.min.js | 1 - src/App.vue | 1 - src/components/Message/index.ts | 160 ++++++++++++++ src/components/Message/instance.ts | 77 +++++++ src/components/Message/message.vue | 327 +++++++++++++++++++++++++++++ src/hooks/useResizeObserver.ts | 75 +++++++ src/utils/typeUtil.ts | 18 ++ src/utils/vueUtil.ts | 20 ++ src/views/IndexView.vue | 2 + 11 files changed, 679 insertions(+), 34 deletions(-) delete mode 100644 public/skmessage.min.js create mode 100644 src/components/Message/index.ts create mode 100644 src/components/Message/instance.ts create mode 100644 src/components/Message/message.vue create mode 100644 src/hooks/useResizeObserver.ts create mode 100644 src/utils/typeUtil.ts create mode 100644 src/utils/vueUtil.ts diff --git a/env.d.ts b/env.d.ts index 4c4fc35..11f02fe 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1,32 +1 @@ /// - -/** 消息配置 */ -interface MessageOptions { - /** 消息类型 */ - type?: 'info' | 'success' | 'warning' | 'error' | 'help' | 'none'; - /** 消息内容 */ - content: string; - /** 关闭延时，0为不自动关闭 */ - duration?: number; - /** 是否可关闭 */ - closeable?: boolean; - pos?: 'left' | 'center' | 'right'; - /** 自定义图标 */ - icon?: string; - /** 自定义类 */ - class?: string; - /** 关闭回调 */ - onClose?: () => void; -} -/** 项目使用的全局消息组件 */ -interface SkMessageObject { - success: (options: MessageOptions | string) => void; - error: (options: MessageOptions | string) => void; - warning: (options: MessageOptions | string) => void; - info: (options: MessageOptions | string) => void; - default: (options: MessageOptions | string) => void; - help: (options: MessageOptions | string) => void; - destroy: () => void; -} - -declare const SkMessage: SkMessageObject; diff --git a/index.html b/index.html index 9f04366..b6adfc6 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,6 @@ 抖音弹幕姬 - diff --git a/public/skmessage.min.js b/public/skmessage.min.js deleted file mode 100644 index 60e1ba9..0000000 --- a/public/skmessage.min.js +++ /dev/null @@ -1 +0,0 @@ -(()=>{"use strict";var e={591:(e,t,n)=>{n.d(t,{A:()=>i});var s=n(236),o=n.n(s),r=n(517),a=n.n(r)()(o());a.push([e.id,".sk-messages{box-sizing:border-box;margin:0;padding:0 24px;font-size:14px;line-height:1.5;position:fixed;top:8px;left:0;width:100%;pointer-events:none;z-index:1007}@media(max-width: 768px){.sk-messages{padding:0}}.sk-messages-destroy{animation:fade-out .3s ease-in-out}.sk-message-destroy{animation:slide-out .3s ease-in-out}.sk-message{position:relative;width:100%;box-sizing:border-box;padding:8px;display:flex;align-items:center}.sk-message.pos-center{justify-content:center}.sk-message.pos-left{justify-content:flex-start}.sk-message.pos-right{justify-content:flex-end}.sk-message-inner{pointer-events:painted;display:flex;align-items:center;box-sizing:border-box;padding:8px 12px;border-radius:5px;border:1px solid #bdcbd2;background-color:#f2f5f6;border-color:#bdcbd2;color:#bdcbd2;fill:#bdcbd2;animation:slide-in .3s ease-in-out}.sk-message-inner .sk-message-content{-webkit-user-select:none;-moz-user-select:none;user-select:none}.sk-message-inner.sk-message-info{background-color:#ebedef;border-color:#9aa7b1;color:#9aa7b1;fill:#9aa7b1}.sk-message-inner.sk-message-success{background-color:#d7f0e8;border-color:#38b48b;color:#38b48b;fill:#38b48b}.sk-message-inner.sk-message-warning{background-color:#fdefdb;border-color:#f6ad49;color:#f6ad49;fill:#f6ad49}.sk-message-inner.sk-message-error{background-color:#fad7d4;border-color:#e83929;color:#e83929;fill:#e83929}.sk-message-inner.sk-message-help{background-color:#ede5f1;border-color:#a67eb7;color:#a67eb7;fill:#a67eb7}.sk-message-close{width:14px;height:14px;display:flex;align-items:center;justify-content:center;margin-left:18px;cursor:pointer}.sk-message-close svg{transition:fill .3s ease-in-out}.sk-message-close:hover svg{fill:#e83929}.sk-message-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;margin-right:8px}.sk-message-icon svg{width:100%;height:100%}.sk-message-icon i{font-size:18px}.sk-icon-info{fill:#9aa7b1}.sk-icon-success{fill:#38b48b}.sk-icon-warning{fill:#f6ad49}.sk-icon-error{fill:#e83929}.sk-icon-help{fill:#a67eb7}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes slide-in{0%{opacity:0;transform:translateY(-60%)}100%{opacity:1;transform:translateY(0%)}}@keyframes slide-out{0%{opacity:1;transform:translateY(0%)}100%{opacity:0;transform:translateY(-60%)}}",""]);const i=a},517:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",s=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),s&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),s&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,s,o,r){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(s)for(var i=0;i0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=r),n&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=n):l[2]=n),o&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=o):l[4]="".concat(o)),t.push(l))}},t}},236:e=>{e.exports=function(e){return e[1]}},316:e=>{var t=[];function n(e){for(var n=-1,s=0;s{var t={};e.exports=function(e,n){var s=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!s)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");s.appendChild(n)}},584:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},260:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},525:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var s="";n.supports&&(s+="@supports (".concat(n.supports,") {")),n.media&&(s+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(s+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),s+=n.css,o&&(s+="}"),n.media&&(s+="}"),n.supports&&(s+="}");var r=n.sourceMap;r&&"undefined"!=typeof btoa&&(s+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleTagTransform(s,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},117:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(s){var o=t[s];if(void 0!==o)return o.exports;var r=t[s]={id:s,exports:{}};return e[s](r,r.exports,n),r.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var s in t)n.o(t,s)&&!n.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.nc=void 0,(()=>{var e=n(316),t=n.n(e),s=n(525),o=n.n(s),r=n(231),a=n.n(r),i=n(260),c=n.n(i),d=n(584),l=n.n(d),p=n(117),u=n.n(p),f=n(591),m={};m.styleTagTransform=u(),m.setAttributes=c(),m.insert=a().bind(null,"head"),m.domAPI=o(),m.insertStyleElement=l(),t()(f.A,m),f.A&&f.A.locals&&f.A.locals;const g=e=>{const t=document.createElementNS("http://www.w3.org/2000/svg","svg");switch(t.classList.add(`sk-icon-${e}`),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("viewBox","0 0 1024 1024"),e){case"info":b(t);break;case"success":h(t);break;case"warning":v(t);break;case"error":y(t);break;case"help":C(t);break;case"close":k(t)}return t},b=e=>{const t=["M1024 512C1024 229.230208 794.769792 0 512 0 229.230208 0 0 229.230208 0 512 0 794.769792 229.230208 1024 512 1024 629.410831 1024 740.826187 984.331046 830.768465 912.686662 841.557579 904.092491 843.33693 888.379234 834.742758 877.590121 826.148587 866.801009 810.43533 865.021658 799.646219 873.615827 718.470035 938.277495 618.001779 974.048781 512 974.048781 256.817504 974.048781 49.951219 767.182496 49.951219 512 49.951219 256.817504 256.817504 49.951219 512 49.951219 767.182496 49.951219 974.048781 256.817504 974.048781 512 974.048781 599.492834 949.714859 683.336764 904.470807 755.960693 897.177109 767.668243 900.755245 783.071797 912.462793 790.365493 924.170342 797.659191 939.573897 794.081058 946.867595 782.373508 997.013826 701.880796 1024 608.898379 1024 512Z","M499.512194 743.02439C499.512194 756.818039 510.694157 768 524.487806 768 538.281453 768 549.463415 756.818039 549.463415 743.02439L549.463415 424.585365C549.463415 410.791718 538.281453 399.609756 524.487806 399.609756 510.694157 399.609756 499.512194 410.791718 499.512194 424.585365L499.512194 743.02439Z","M499.512194 318.439025C499.512194 332.232672 510.694157 343.414635 524.487806 343.414635 538.281453 343.414635 549.463415 332.232672 549.463415 318.439025L549.463415 274.731708C549.463415 260.938059 538.281453 249.756098 524.487806 249.756098 510.694157 249.756098 499.512194 260.938059 499.512194 274.731708L499.512194 318.439025Z"];for(const n of t){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",n),e.appendChild(t)}},h=e=>{const t=["M464.247573 677.487844C474.214622 686.649009 489.665824 686.201589 499.086059 676.479029L798.905035 367.037897C808.503379 357.131511 808.253662 341.319802 798.347275 331.721455 788.44089 322.12311 772.62918 322.372828 763.030833 332.279215L463.211857 641.720346 498.050342 640.711531 316.608838 473.940461C306.453342 464.606084 290.653675 465.271735 281.319298 475.427234 271.984922 485.582733 272.650573 501.382398 282.806071 510.716774L464.247573 677.487844Z","M1024 512C1024 229.230208 794.769792 0 512 0 229.230208 0 0 229.230208 0 512 0 794.769792 229.230208 1024 512 1024 629.410831 1024 740.826187 984.331046 830.768465 912.686662 841.557579 904.092491 843.33693 888.379234 834.742758 877.590121 826.148587 866.801009 810.43533 865.021658 799.646219 873.615827 718.470035 938.277495 618.001779 974.048781 512 974.048781 256.817504 974.048781 49.951219 767.182496 49.951219 512 49.951219 256.817504 256.817504 49.951219 512 49.951219 767.182496 49.951219 974.048781 256.817504 974.048781 512 974.048781 599.492834 949.714859 683.336764 904.470807 755.960693 897.177109 767.668243 900.755245 783.071797 912.462793 790.365493 924.170342 797.659191 939.573897 794.081058 946.867595 782.373508 997.013826 701.880796 1024 608.898379 1024 512Z"];for(const n of t){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",n),e.appendChild(t)}},v=e=>{const t=["M598.272514 158.17909C545.018272 71.994036 451.264177 71.951401 397.724122 158.397341L25.049726 760.118586C-28.93569 847.283607 14.324655 927.325257 116.435565 929.308966L891.057077 929.313666C993.88467 931.315989 1036.926865 868.038259 983.25955 781.189694 980.374633 776.521099 980.374633 776.521099 971.719878 762.515313 967.393745 755.514432 967.393745 755.514432 963.78822 749.679695 956.511588 737.90409 941.113263 734.285867 929.3951 741.59817 917.676937 748.910473 914.076365 764.384279 921.352996 776.159885 924.958522 781.994622 924.958522 781.994622 929.284655 788.995503 937.939409 803.001289 937.939409 803.001289 940.824326 807.669884 972.284602 858.581314 957.441559 880.402549 891.539823 879.122276L116.918309 879.117577C54.037254 877.891296 33.95555 840.735497 67.458075 786.642217L440.132471 184.920971C474.112981 130.055931 522.112175 130.077759 556.029583 184.965509L857.08969 656.83971C864.534622 668.508595 879.98329 671.9032 891.595253 664.421773 903.207217 656.940343 906.585263 641.415949 899.140331 629.747063L598.272514 158.17909Z","M474.536585 619.793346C474.536585 633.654611 485.718547 644.891386 499.512194 644.891386 513.305843 644.891386 524.487806 633.654611 524.487806 619.793346L524.487806 299.793346C524.487806 285.932082 513.305843 274.695307 499.512194 274.695307 485.718547 274.695307 474.536585 285.932082 474.536585 299.793346L474.536585 619.793346Z","M474.465781 776.736145C474.565553 790.597047 485.828105 801.75225 499.621393 801.651987 513.414679 801.551725 524.515467 790.233967 524.415695 776.373065L523.955031 712.375667C523.855258 698.514767 512.592708 687.359563 498.79942 687.459825 485.006133 687.560087 473.905346 698.877847 474.005118 712.738748L474.465781 776.736145Z"];for(const n of t){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",n),e.appendChild(t)}},y=e=>{const t=["M1024 512C1024 229.230208 794.769792 0 512 0 229.230208 0 0 229.230208 0 512 0 794.769792 229.230208 1024 512 1024 629.410831 1024 740.826187 984.331046 830.768465 912.686662 841.557579 904.092491 843.33693 888.379234 834.742758 877.590121 826.148587 866.801009 810.43533 865.021658 799.646219 873.615827 718.470035 938.277495 618.001779 974.048781 512 974.048781 256.817504 974.048781 49.951219 767.182496 49.951219 512 49.951219 256.817504 256.817504 49.951219 512 49.951219 767.182496 49.951219 974.048781 256.817504 974.048781 512 974.048781 599.492834 949.714859 683.336764 904.470807 755.960693 897.177109 767.668243 900.755245 783.071797 912.462793 790.365493 924.170342 797.659191 939.573897 794.081058 946.867595 782.373508 997.013826 701.880796 1024 608.898379 1024 512Z","M331.838918 663.575492C322.174057 673.416994 322.317252 689.230029 332.158756 698.894891 342.000258 708.559753 357.813293 708.416557 367.478155 698.575053L717.473766 342.182707C727.138628 332.341205 726.995433 316.528171 717.153931 306.863309 707.312427 297.198447 691.499394 297.341643 681.834532 307.183147L331.838918 663.575492Z","M681.834532 698.575053C691.499394 708.416557 707.312427 708.559753 717.153931 698.894891 726.995433 689.230029 727.138628 673.416994 717.473766 663.575492L367.478155 307.183147C357.813293 297.341643 342.000258 297.198447 332.158756 306.863309 322.317252 316.528171 322.174057 332.341205 331.838918 342.182707L681.834532 698.575053Z"];for(const n of t){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",n),e.appendChild(t)}},C=e=>{const t=["M1024 512C1024 229.230208 794.769792 0 512 0 229.230208 0 0 229.230208 0 512 0 794.769792 229.230208 1024 512 1024 629.410831 1024 740.826187 984.331046 830.768465 912.686662 841.557579 904.092491 843.33693 888.379234 834.742758 877.590121 826.148587 866.801009 810.43533 865.021658 799.646219 873.615827 718.470035 938.277495 618.001779 974.048781 512 974.048781 256.817504 974.048781 49.951219 767.182496 49.951219 512 49.951219 256.817504 256.817504 49.951219 512 49.951219 767.182496 49.951219 974.048781 256.817504 974.048781 512 974.048781 599.492834 949.714859 683.336764 904.470807 755.960693 897.177109 767.668243 900.755245 783.071797 912.462793 790.365493 924.170342 797.659191 939.573897 794.081058 946.867595 782.373508 997.013826 701.880796 1024 608.898379 1024 512Z","M533.078812 691.418556C551.918022 691.418556 567.190219 706.673952 567.190219 725.511386L567.190219 734.541728C567.190219 753.370677 552.049365 768.634558 533.078812 768.634558L533.078812 768.634558C514.239601 768.634558 498.967405 753.379162 498.967405 734.541728L498.967405 725.511386C498.967405 706.682436 514.108258 691.418556 533.078812 691.418556L533.078812 691.418556ZM374.634146 418.654985C374.634146 418.654985 377.308518 442.210609 403.631972 442.210609 429.955424 442.210609 431.511799 418.654985 431.511799 418.654985 429.767552 342.380653 465.107535 306.162338 537.45591 309.760186 585.612324 315.19693 610.562654 342.380653 612.231066 391.391309 608.894242 413.21824 590.617557 441.441342 558.083539 475.90071 515.008196 519.47462 493.470524 558.49126 493.470524 592.950626L493.470524 628.289468C493.470524 628.289468 496.775846 649.365867 520.582206 649.365867 544.388565 649.365867 547.693888 628.289468 547.693888 628.289468L547.693888 603.744164C547.693888 574.961397 568.321517 540.342125 609.652612 500.28611 652.879629 460.469948 674.341463 424.091729 674.341463 391.391309 670.777131 300.725594 623.530758 253.473886 532.223166 249.796087 427.189099 248.037141 374.634146 304.323439 374.634146 418.654985Z"];for(const n of t){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",n),e.appendChild(t)}},k=e=>{const t=["M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z","M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"];for(const n of t){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",n),e.appendChild(t)}};!function(){const e={parent:null,count:0},t=()=>{e.parent||(e.parent=(()=>{const e=document.createElement("div");return e.classList.add("sk-messages"),e})(),document.body.appendChild(e.parent))},n=t=>{t.classList.add("sk-message-destroy"),setTimeout((()=>{e.parent&&e.parent.removeChild(t)}),300)},s=t=>{const s=(e=>{const t=document.createElement("div"),s=e.pos??"center";t.classList.add("sk-message",`pos-${s}`),e.class&&t.classList.add(e.class);const o=e.type??"info",r=document.createElement("div");if(r.classList.add("sk-message-inner",`sk-message-${o}`),"none"!==o){const t=document.createElement("span");if(t.classList.add("sk-message-icon"),e.icon){const n=document.createElement("i");n.classList.add(e.icon),t.appendChild(n)}else{const e=g(o);t.appendChild(e)}r.appendChild(t)}const a=document.createElement("span");if(a.classList.add("sk-message-content"),a.innerText=e.content,r.appendChild(a),e.closeable||0===e.duration){const s=document.createElement("span");s.classList.add("sk-message-close");const o=g("close");s.appendChild(o),s.addEventListener("click",(()=>{n(t),e.onClose&&e.onClose()})),r.appendChild(s)}return t.appendChild(r),t})(t);e.parent?.appendChild(s),e.count+=1;const o=null==t.duration?3e3:t.duration;o>0&&setTimeout((()=>{n(s),t.onClose&&t.onClose(),e.count-=1}),o)},o=function(e){t(),s(e)};o.info=function(e){t();const n={content:""};"string"==typeof e?n.content=e:Object.assign(n,e),n.type="info",s(n)},o.success=function(e){t();const n={content:""};"string"==typeof e?n.content=e:Object.assign(n,e),n.type="success",s(n)},o.warning=function(e){t();const n={content:""};"string"==typeof e?n.content=e:Object.assign(n,e),n.type="warning",s(n)},o.error=function(e){t();const n={content:""};"string"==typeof e?n.content=e:Object.assign(n,e),n.type="error",s(n)},o.help=function(e){t();const n={content:""};"string"==typeof e?n.content=e:Object.assign(n,e),n.type="help",s(n)},o.default=function(e){t();const n={content:""};"string"==typeof e?n.content=e:Object.assign(n,e),n.type="none",s(n)},o.open=function(e,n){const o={content:e};t(),o.type=n??"info",s(o)},o.destroy=function(){e.parent&&(e.parent.classList.add("sk-messages-destroy"),setTimeout((()=>{e.parent&&document.body.removeChild(e.parent)}),300))},window.SkMessage=o}()})()})(); \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 7d12f41..20c6ebc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,6 @@ + + diff --git a/src/hooks/useResizeObserver.ts b/src/hooks/useResizeObserver.ts new file mode 100644 index 0000000..690c08d --- /dev/null +++ b/src/hooks/useResizeObserver.ts @@ -0,0 +1,75 @@ +import { unrefElement } from '@/utils/vueUtil'; +import { computed, getCurrentScope, onScopeDispose, toValue, watch } from 'vue'; +import type { MaybeRefOrGetter } from 'vue'; +import type { MaybeComputedElementRef, MaybeElement } from '@/utils/vueUtil'; + +/** @vue/use useResizeObserver */ + +/** + * 如果有活跃的 effect 作用域，则调用 onScopeDispose + * - 即尝试取消当前作用域内的监听(副作用函数) + * @param fn + */ +export function tryOnScopeDispose(fn: () => void) { + if (getCurrentScope()) { + onScopeDispose(fn); + return true; + } + return false; +} + +export interface UseResizeObserverOptions { + /* + * 指定一个自定义的 window 实例，例如使用 iframe 或在测试环境中 + */ + window?: Window; + /** + * 观察者观察的框模型 + * @default 'content-box' + */ + box?: ResizeObserverBoxOptions; +} + +const defaultWindow = window; + +export const useResizeObserver = function ( + target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter, + callback: ResizeObserverCallback, + options: UseResizeObserverOptions = {} +) { + const { window = defaultWindow, ...observerOptions } = options; + let observer: ResizeObserver | undefined; + + const cleanup = () => { + if (observer) { + observer.disconnect(); + observer = undefined; + } + }; + + const targets = computed(() => { + const _targets = toValue(target); + return Array.isArray(_targets) ? _targets.map(el => unrefElement(el)) : [unrefElement(_targets)]; + }); + + const stopWatch = watch( + targets, + els => { + cleanup(); + observer = new ResizeObserver(callback); + for (const _el of els) { + if (_el) observer!.observe(_el, observerOptions); + } + }, + { immediate: true, flush: 'post' } + ); + + const stop = () => { + cleanup(); + stopWatch(); + }; + + tryOnScopeDispose(stop); + + return { stop }; +}; diff --git a/src/utils/typeUtil.ts b/src/utils/typeUtil.ts new file mode 100644 index 0000000..b7667da --- /dev/null +++ b/src/utils/typeUtil.ts @@ -0,0 +1,18 @@ +export const objectToString = Object.prototype.toString; +export const toTypeString = (value: unknown): string => objectToString.call(value); + +export const isNumber = (val: any): val is number => typeof val === 'number'; +export const isArray = Array.isArray; +export const isMap = (val: unknown): val is Map => toTypeString(val) === '[object Map]'; +export const isSet = (val: unknown): val is Set => toTypeString(val) === '[object Set]'; + +export const isDate = (val: unknown): val is Date => toTypeString(val) === '[object Date]'; +export const isRegExp = (val: unknown): val is RegExp => toTypeString(val) === '[object RegExp]'; +export const isFunction = (val: unknown): val is Function => typeof val === 'function'; +export const isString = (val: unknown): val is string => typeof val === 'string'; +export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'; +export const isObject = (val: unknown): val is Record => val !== null && typeof val === 'object'; + +export const isPromise = (val: unknown): val is Promise => { + return isObject(val) && isFunction(val.then) && isFunction(val.catch); +}; diff --git a/src/utils/vueUtil.ts b/src/utils/vueUtil.ts new file mode 100644 index 0000000..3334087 --- /dev/null +++ b/src/utils/vueUtil.ts @@ -0,0 +1,20 @@ +import type { ComponentPublicInstance, MaybeRef, MaybeRefOrGetter } from 'vue'; +import { toValue } from 'vue'; + +export type VueInstance = ComponentPublicInstance; +export type MaybeElementRef = MaybeRef; +export type MaybeComputedElementRef = MaybeRefOrGetter; +export type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null; + +export type UnRefElementReturn = T extends VueInstance + ? Exclude + : T | undefined; + +/** + * 获取元素或 Vue 组件实例 ref 的 dom 元素 + * @param elRef + */ +export function unrefElement(elRef: MaybeComputedElementRef): UnRefElementReturn { + const plain = toValue(elRef); + return (plain as VueInstance)?.$el ?? plain; +} diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue index b70fbde..9252960 100644 --- a/src/views/IndexView.vue +++ b/src/views/IndexView.vue @@ -68,6 +68,8 @@ import { ref, useTemplateRef } from 'vue'; import { CLog } from '@/utils/logUtil'; import { getId } from '@/utils/idUtil'; import { RelayCast } from '@/core/relay'; +import SkMessage from '@/components/Message'; + // 连接状态 const connectStatus = ref(0); // 转发状态