vue-pure-admin/dist/static/js/index-6db1a671.js

import{d as G,r as B,ag as K,y as E,o as T,a as le,n as oe,a$ as ue,L as ie,e as L,j as de,h as c,ao as re,aa as fe,a9 as me,b as U,c as ce,w as p,g as f,f as g,E as M,aj as pe,u as ge,b0 as ve}from"./index-285ed5c1.js";const W=[{avatar:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAFBAYBAgMAB//aAAgBAQAAAAD7HU4ObhMC3AnlYvY8ISwA+6WDOd4/RA96FVeF66BOVWB3TsAOgZC27wv/xAAYAQEBAQEBAAAAAAAAAAAAAAACAwQAAf/aAAgBAhAAAAC3sw8uyRDQPV//xAAYAQADAQEAAAAAAAAAAAAAAAAAAgMBBP/aAAgBAxAAAACQ7LfmoUTNvFf/xAA0EAACAQMBBAcHAwUAAAAAAAABAgMABBESBRMxQRAhIjJRYbEUIzRCUnOBM3KSU2KRoeH/2gAIAQEAAT8AmmSCJpHOAoq6vZp8lmITkgonSQCMZxikkdGDxsVbxFbK2l7TGUkwHQfy6Ln4if7jetbcdglvH9TFv40hD71CGzlQpAyACRkt4VcxojxOdIj06GzwA5VKkilGUdjUcNxD9XlwI5g1Bfm0u4nC5UHDeYNWu0LS4B3D6mHHIwaufiJ/uN61tm6Et6GPCIbv8mtqi4gtrFkzjeuxIGRq+TP4orI1jpK+8MHAfVprYcM8kVysmoIGiwG8UfVgVcwh1ecDGiYcvlNWk7W9zDKucqwyPEVOczzfvb1q/wBkXWqR4Sja8nDHGCajAEagHIAx/jourmK0haaV9KrWyrFZLRZJ07MqNhc8Q3M/irfZFlaOGQF2HzOc1cACeYD+o3r0XptYEJKAyMx06TgsxOaupr+MhkIQk6TlfPlkVNCIxBc3A9onLjRG/WtWV1BPFlRp09TpzBHLoufiJ/uN69G05JLxt8C2ksQpTiAMHIq0mQz6HnMnZwurBwBRhKTLLK5Y6Oz/AGf9qwla3u4TykBRh/sdFx8RN9xvWpri43Unv5O6fmNSSSCHGtsb0DGfKrFm3zdZ7o9RUskhMnbbu+NLJJrh7bfqJz869onxjfSY/callk3knvG7x51//8QAIxEAAgEEAQMFAAAAAAAAAAAAAQIRAAMSMRAEIXETMjNBUf/aAAgBAgEBPwBMUTNv3tSdQrgZDYpwMmx0N8PdFv0iBMAyKS4QroF99JcxDhhMntwxgUCoJIER90jZCeG2PBpvjNWtHzx//8QAIBEAAgICAgIDAAAAAAAAAAAAAQIAERASAyEyM0GBkf/aAAgBAwEBPwBtmbURuErdRb1W/nCIW3vqMgJVr8YyWVIyvYG/5CKwJze36jY//9k=",name:"美绪",text:"马什么梅？"},{avatar:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAABQIDBAEGB//aAAgBAQAAAAD65hzG3WLcATfCbHYQ9IY0uiEfRkU1IOr+RoUG1ornWj7Y6//EABgBAQADAQAAAAAAAAAAAAAAAAQAAgUD/9oACAECEAAAACEf3IJba51tGDNq/wD/xAAYAQEAAwEAAAAAAAAAAAAAAAAEAQMFAv/aAAgBAxAAAABSg0MWQdj+c6VozP/EAC0QAAIBAwMBBgUFAAAAAAAAAAECEQADBBASMUEiUVJhcZEFExQhgSAyQoKx/9oACAEBAAE/AKu5oEi2A3meKOXf8cfgV9Xe2kEgyOeCKsZSXAqs0XP91z7+wC3MSCzeg/RbuG06uO8T6a5kNkOOu0CpUXWQMdo4kQRPQihPd9tH+4jXIw0yDukq0RNHFu2/iOVku0pfx7foHt91MttbMyN7njqQDo3BPkdWEqRJEjkV8QOV2LVq2xBBlkoq+y181CrgHn1nXHffZQ+UH8aEwCaEoJP9qzbe+ySOUO7XCuxca2f5CR6jS477H7bftPWt7+NvekdzbWXYyo60rvtXtHgda3v4j71Yd/qLPaPJ6+Vb38be9f/EACYRAAECBAQHAQAAAAAAAAAAAAECAwAEEBIREzFSITNBQlFhgXL/2gAIAQIBAT8AffKDYjXqYznd5hhwuI46ijjOOaSfaYUm232Ik9F/KKQFRMN2LHgiJVdrmG6s32fYa5iP0Kf/xAAmEQABAgQFBAMAAAAAAAAAAAABAgMAEBESBBNCUoEhMTNhUXFy/9oACAEDAQE/AGGAoXK4EZLWwQ+2G19Oxk28RlhI9GEqur9xi9HMm3C2qtAfRhhy9J+axiUXIrtnhdfEOeNf5Mv/2Q==",name:"博士",text:"马东什么？"},{avatar:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAxAAACAgMBAAAAAAAAAAAAAAAABgQFAQIHAwEBAAMBAAAAAAAAAAAAAAAAAwABAgT/2gAMAwEAAhADEAAAAI7CsPnN1VeZ0okpTbSWASKzwmMPRy3PuuWhpv4KvQ7pcJYTUb+hdLQYWJoaVU+RU3jcXiaoegAhWOAPeeaBd1wGtf/EAC4QAAIBAwIEBAUFAQAAAAAAAAECAwAEEQUhBhASMRMiQWEUI3KBoSAzQlFSkv/aAAgBAQABPwDTxidHHbdTyZGjdkcYYelBGKM4HlUgH7/osXInRfQsK0q18abxGHkj/JrV0KXrEfzUGtLiE0F1G48r4GfcVJDJFI0TbMp52W91D9VXt42mWQCu0QUqHZQC7SyDIRA22QO5NXkFyLeFpnWRggYsMZw/+ioAPsRVlOtrpsshx+6d2OFGw3J/oVK897YR6nbfORCTkp0OVQ7lRk5Aq5gMZSVR8qVepfbPpy0jDSRyEZxIg/6JrjKJytlEEJ63uJD7ttXB6Tn41bhW8Mwxxjqzt3OBWrx+Bw9fQsRvIgBzjYutcP3F8upWVmZZltvjFPQW22BqeAJpHh+kWyeyhsL+KXS9RcB1WLpYZGSc4NcKwxTrcRy+qrj2IJIqe3S5AEsSOAcgMobB+9Lb9KhVAAHYCntRIjI6hkYYZWGQRUGm2ltMssVsiSKCAVGMZqWFZ4fDY4XYn7ULaEgF182N/Me9cIuI3kY9gFodLAEHINFgKDKdqwK1LVotOMSsnWz5JAPYUeJZyTiKMVwv2n+la08npcZOBjke3LVWZtRuizE4kI5f/8QAIBEBAAIBAgcAAAAAAAAAAAAAAQARAwIQEiAhMTJBcf/aAAgBAgEBPwDL5HzkadfX0RDjmTSUJtks1MqWpVypk7uxt//EACARAQABAwMFAAAAAAAAAAAAAAEAAhEhAxATEiIxYXH/2gAIAQMBAT8A0m1L9l+2++Sg9sF45p1N7M6iUJYwM5GYW4ZmZT4Njb//2Q==",name:"柚子",text:"什么冬梅？"}],H=["1","2","3","4","5","6","7","8","9"],z=()=>H.map((s,l)=>{const v=l%3;return{avatar:W[v].avatar,name:W[v].name,text:s}});function he(s,l,v="modelValue",m){return E({get:()=>s[v],set:a=>{l(`update:${v}`,m?m(a):a)}})}var Y=G({name:"vue3-danmaku",components:{},props:{danmus:{type:Array,required:!0,default:()=>[]},channels:{type:Number,default:0},autoplay:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},useSlot:{type:Boolean,default:!1},debounce:{type:Number,default:100},speeds:{type:Number,default:200},randomChannel:{type:Boolean,default:!1},fontSize:{type:Number,default:18},top:{type:Number,default:4},right:{type:Number,default:0},isSuspend:{type:Boolean,default:!1},extraStyle:{type:String,default:""}},emits:["list-end","play-end","update:danmus"],setup(s,{emit:l,slots:v}){let m=B(document.createElement("div")),a=B(document.createElement("div"));const i=B(0),y=B(0);let x=0;const S=B(0),I=B(0),h=B(0),w=B(!1),Q=B(!1),d=B({}),e=he(s,l,"danmus"),C=K({channels:E(()=>s.channels||S.value),autoplay:E(()=>s.autoplay),loop:E(()=>s.loop),useSlot:E(()=>s.useSlot),debounce:E(()=>s.debounce),randomChannel:E(()=>s.randomChannel)}),o=K({height:E(()=>I.value),fontSize:E(()=>s.fontSize),speeds:E(()=>s.speeds),top:E(()=>s.top),right:E(()=>s.right)});T(()=>{b()}),le(()=>{j()});function b(){R(),s.isSuspend&&O(),C.autoplay&&u()}function R(){i.value=m.value.offsetWidth,y.value=m.value.offsetHeight}function u(){Q.value=!1,x||(x=setInterval(()=>F(),C.debounce))}function F(){if(!Q.value&&e.value.length)if(h.value>e.value.length-1){const A=a.value.children.length;C.loop&&(A<h.value&&(l("list-end"),h.value=0),V())}else V()}function V(A){const r=C.loop?h.value%e.value.length:h.value,n=A||e.value[r];let t=document.createElement("div");C.useSlot?t=N(n,r).$el:(t.innerHTML=n,t.setAttribute("style",s.extraStyle),t.style.fontSize=`${o.fontSize}px`,t.style.lineHeight=`${o.fontSize}px`),t.classList.add("dm"),a.value.appendChild(t),t.style.opacity="0",oe(()=>{o.height||(I.value=t.offsetHeight),C.channels||(S.value=Math.floor(y.value/(o.height+o.top)));let k=P(t);if(k>=0){const D=t.offsetWidth,se=o.height;t.classList.add("move"),t.dataset.index=`${r}`,t.style.opacity="1",t.style.top=k*(se+o.top)+"px",t.style.width=D+o.right+"px",t.style.setProperty("--dm-scroll-width",`-${i.value+D*2}px`),t.style.left=`${i.value}px`,t.style.animationDuration=`${i.value/o.speeds}s`,t.addEventListener("animationend",()=>{Number(t.dataset.index)===e.value.length-1&&!C.loop&&l("play-end",t.dataset.index),a.value&&a.value.removeChild(t)}),h.value++}else a.value.removeChild(t)})}function N(A,r){return ue({render(){return ie("div",{},[v.dm&&v.dm({danmu:A,index:r})])}}).mount(document.createElement("div"))}function P(A){let r=[...Array(C.channels).keys()];C.randomChannel&&(r=r.sort(()=>.5-Math.random()));for(let n of r){const t=d.value[n];if(t&&t.length)for(let k=0;k<t.length;k++){const D=J(t[k])-10;if(D<=(A.offsetWidth-t[k].offsetWidth)*.88||D<=0)break;if(k===t.length-1)return d.value[n].push(A),A.addEventListener("animationend",()=>d.value[n].splice(0,1)),n%C.channels}else return d.value[n]=[A],A.addEventListener("animationend",()=>d.value[n].splice(0,1)),n%C.channels}return-1}function J(A){const r=A.offsetWidth||parseInt(A.style.width),n=A.getBoundingClientRect().right||a.value.getBoundingClientRect().right+r;return a.value.getBoundingClientRect().right-n}function _(){clearInterval(x),x=0}function O(){let A=[];a.value.addEventListener("mousemove",r=>{let n=r.target;n.className.includes("dm")||(n=n.closest(".dm")||n),n.className.includes("dm")&&(n.classList.add("pause"),A.push(n))}),a.value.addEventListener("mouseout",r=>{let n=r.target;n.className.includes("dm")||(n=n.closest(".dm")||n),n.className.includes("dm")&&(n.classList.remove("pause"),A.forEach(t=>{t.classList.remove("pause")}),A=[])})}function j(){_(),h.value=0}function X(){I.value=0,b()}function Z(){d.value={},a.value.innerHTML="",Q.value=!0,w.value=!1,j()}function q(){Q.value=!0}function $(A){if(h.value===e.value.length)return e.value.push(A),e.value.length-1;{const r=h.value%e.value.length;return e.value.splice(r,0,A),r+1}}function ee(A){return e.value.push(A),e.value.length-1}function te(){return!Q.value}function ne(){w.value=!1}function ae(){w.value=!0}function Ae(){R();const A=a.value.getElementsByClassName("dm");for(let r=0;r<A.length;r++){const n=A[r];n.style.setProperty("--dm-scroll-width",`-${i.value+n.offsetWidth*2}px`),n.style.left=`${i.value}px`,n.style.animationDuration=`${i.value/o.speeds}s`}}return{container:m,dmContainer:a,hidden:w,paused:Q,danmuList:e,getPlayState:te,resize:Ae,play:u,pause:q,stop:Z,show:ne,hide:ae,reset:X,add:$,push:ee,insert:V}}});const Ce={ref:"container",class:"vue-danmaku"};function Be(s,l,v,m,a,i){return L(),de("div",Ce,[c("div",{ref:"dmContainer",class:re(["danmus",{show:!s.hidden},{paused:s.paused}])},null,2),fe(s.$slots,"default")],512)}function Ee(s,l){l===void 0&&(l={});var v=l.insertAt;if(!(!s||typeof document>"u")){var m=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",v==="top"&&m.firstChild?m.insertBefore(a,m.firstChild):m.appendChild(a),a.styleSheet?a.styleSheet.cssText=s:a.appendChild(document.createTextNode(s))}}var ye=`.vue-danmaku {
  position: relative;
  overflow: hidden;
}
.vue-danmaku .danmus {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.vue-danmaku .danmus.show {
  opacity: 1;
}
.vue-danmaku .danmus.paused .dm.move {
  animation-play-state: paused;
}
.vue-danmaku .danmus .dm {
  position: absolute;
  font-size: 20px;
  color: #ddd;
  white-space: pre;
  transform: translateX(0);
  transform-style: preserve-3d;
}
.vue-danmaku .danmus .dm.move {
  will-change: transform;
  animation-name: moveLeft;
  animation-timing-function: linear;
  animation-play-state: running;
}
.vue-danmaku .danmus .dm.pause {
  animation-play-state: paused;
  z-index: 10;
}
@keyframes moveLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--dm-scroll-width));
  }
}
@-webkit-keyframes moveLeft {
  from {
    -webkit-transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(var(--dm-scroll-width));
  }
}`;Ee(ye);Y.render=Be;Y.__file="src/lib/Danmaku.vue";const Qe={class:"card-header"},ke={class:"font-medium"},xe={class:"flex gap-5"},Ie={class:"danmu-item"},we=["src"],Me={class:"main"},Se={class:"ml-5"},De={class:"ml-5"},be={class:"ml-5"},Re={class:"flex"},Fe=G({name:"Danmaku",__name:"index",setup(s){const l=B(),v=B(z()),m=B("");let a=0;const i=K({channels:5,useSlot:!0,loop:!0,speeds:200,fontSize:20,top:10,right:0,debounce:100,randomChannel:!0});T(()=>{window.onresize=()=>w()}),me(()=>{window.onresize=null});function y(d){switch(d){case"play":l.value.play();break;case"pause":l.value.pause();break;case"stop":l.value.stop();break;case"show":l.value.show();break;case"hide":l.value.hide();break;case"reset":l.value.reset();break}}function x(d){i.useSlot=d,v.value=d?z():H,setTimeout(()=>{l.value.stop(),l.value.play()})}function S(d){i.speeds<=10&&d===-10||(i.speeds+=d,l.value.reset())}function I(d){i.fontSize+=d,l.value.reset()}function h(d){!i.channels&&d===-1||(i.channels+=d)}function w(){a&&clearTimeout(a),a=window.setTimeout(()=>{l.value.resize()},500)}function Q(){if(!m.value)return;const d=i.useSlot?{avatar:"https://i.loli.net/2021/01/17/xpwbm3jKytfaNOD.jpg",name:"你",text:m.value}:m.value;l.value.add(d),m.value=""}return(d,e)=>{const C=U("el-link"),o=U("el-button"),b=U("el-input"),R=U("el-card");return L(),ce(R,{shadow:"never"},{header:p(()=>[c("div",Qe,[c("span",ke,[f(" 弹幕组件，采用开源的 "),g(C,{href:"https://github.com/hellodigua/vue-danmaku/tree/vue3",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:p(()=>[f(" vue3-danmaku ")]),_:1})])])]),default:p(()=>[c("div",xe,[g(ge(Y),pe({ref_key:"danmaku",ref:l,class:"demo",danmus:v.value,"onUpdate:danmus":e[0]||(e[0]=u=>v.value=u),isSuspend:""},i),{dm:p(({danmu:u,index:F})=>[c("div",Ie,[c("img",{class:"img",src:u.avatar},null,8,we),c("span",null,M(F)+M(u.name)+"：",1),c("span",null,M(u.text),1)])]),_:1},16,["danmus"]),c("div",Me,[c("p",null,[f(" 播放： "),g(o,{onClick:e[1]||(e[1]=u=>y("play"))},{default:p(()=>[f("播放")]),_:1}),g(o,{onClick:e[2]||(e[2]=u=>y("pause"))},{default:p(()=>[f("暂停")]),_:1}),g(o,{onClick:e[3]||(e[3]=u=>y("stop"))},{default:p(()=>[f("停止")]),_:1})]),c("p",null,[f(" 模式： "),g(o,{onClick:e[4]||(e[4]=u=>x(!0))},{default:p(()=>[f("弹幕 slot")]),_:1}),g(o,{onClick:e[5]||(e[5]=u=>x(!1))},{default:p(()=>[f("普通文本")]),_:1})]),c("p",null,[f(" 显示： "),g(o,{onClick:e[6]||(e[6]=u=>y("show"))},{default:p(()=>[f("显示")]),_:1}),g(o,{onClick:e[7]||(e[7]=u=>y("hide"))},{default:p(()=>[f("隐藏")]),_:1})]),c("p",null,[f(" 速度： "),g(o,{onClick:e[8]||(e[8]=u=>S(-10))},{default:p(()=>[f("减速")]),_:1}),g(o,{onClick:e[9]||(e[9]=u=>S(10))},{default:p(()=>[f("增速")]),_:1}),c("span",Se,"当前速度："+M(i.speeds)+"像素/s",1)]),c("p",null,[f(" 字号： "),g(o,{disabled:i.useSlot,onClick:e[10]||(e[10]=u=>I(-1))},{default:p(()=>[f(" 缩小 ")]),_:1},8,["disabled"]),g(o,{disabled:i.useSlot,onClick:e[11]||(e[11]=u=>I(1))},{default:p(()=>[f(" 放大 ")]),_:1},8,["disabled"]),c("span",De,"当前字号："+M(i.fontSize)+"px",1)]),c("p",null,[f(" 轨道： "),g(o,{onClick:e[12]||(e[12]=u=>h(-1))},{default:p(()=>[f("-1")]),_:1}),g(o,{onClick:e[13]||(e[13]=u=>h(1))},{default:p(()=>[f("+1")]),_:1}),g(o,{onClick:e[14]||(e[14]=u=>h(-i.channels))},{default:p(()=>[f(" 填满 ")]),_:1}),c("span",be,"当前轨道："+M(i.channels),1)]),c("p",Re,[g(b,{type:"text",placeholder:"输入评论后，回车发送弹幕",modelValue:m.value,"onUpdate:modelValue":e[15]||(e[15]=u=>m.value=u),onKeyup:ve(Q,["enter"])},null,8,["modelValue","onKeyup"])])])])]),_:1})}}});export{Fe as default};