vue-pure-admin/static/js/index-BG0cLvfK.js

import{k as _,g as p,v as Z,U as q,d as H,a as C,p as E,r as G,m as P,z as $,f as J,a5 as ee,N as te,y as ne,o as Ae,b as ae,w as m,e as K,h as i,i as c,t as R,a6 as se,u as le,a7 as oe,_ as ue}from"./index-ihsPCFFy.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:"什么冬梅？"}],O=["1","2","3","4","5","6","7","8","9"],j=()=>O.map((u,A)=>{const B=A%3;return{avatar:W[B].avatar,name:W[B].name,text:u}});var N=H({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","dm-over","dm-out","update:danmus"],setup(u,{emit:A,slots:B}){let v=C(document.createElement("div")),s=C(document.createElement("div"));const l=C(0),k=C(0);let w=0;const U=C(0),I=C(0),h=C(0),M=C(!1),y=C(!1),d=C({}),e=function(r,f,t="modelValue",n){return E({get:()=>r[t],set:S=>{f(`update:${t}`,S)}})}(u,A,"danmus"),g=G({channels:E(()=>u.channels||U.value),autoplay:E(()=>u.autoplay),loop:E(()=>u.loop),useSlot:E(()=>u.useSlot),debounce:E(()=>u.debounce),randomChannel:E(()=>u.randomChannel)}),a=G({height:E(()=>I.value),fontSize:E(()=>u.fontSize),speeds:E(()=>u.speeds),top:E(()=>u.top),right:E(()=>u.right)});function Y(){z(),u.isSuspend&&function(){let r=[];s.value.addEventListener("mouseover",f=>{let t=f.target;t.className.includes("dm")||(t=t.closest(".dm")||t),t.className.includes("dm")&&(r.includes(t)||(A("dm-over",{el:t}),t.classList.add("pause"),r.push(t)))}),s.value.addEventListener("mouseout",f=>{let t=f.target;t.className.includes("dm")||(t=t.closest(".dm")||t),t.className.includes("dm")&&(A("dm-out",{el:t}),t.classList.remove("pause"),r.forEach(n=>{n.classList.remove("pause")}),r=[])})}(),g.autoplay&&o()}function z(){if(l.value=v.value.offsetWidth,k.value=v.value.offsetHeight,l.value===0||k.value===0)throw new Error("获取不到容器宽高")}function o(){y.value=!1,w||(w=setInterval(()=>function(){if(!y.value&&e.value.length)if(h.value>e.value.length-1){const r=s.value.children.length;g.loop&&(r<h.value&&(A("list-end"),h.value=0),F())}else F()}(),g.debounce))}function F(r){const f=g.loop?h.value%e.value.length:h.value,t=r||e.value[f];let n=document.createElement("div");g.useSlot?n=function(S,Q){return ee({render:()=>te("div",{},[B.dm&&B.dm({danmu:S,index:Q})])}).mount(document.createElement("div"))}(t,f).$el:(n.innerHTML=t,n.setAttribute("style",u.extraStyle),n.style.fontSize=`${a.fontSize}px`,n.style.lineHeight=`${a.fontSize}px`),n.classList.add("dm"),s.value.appendChild(n),n.style.opacity="0",ne(()=>{a.height||(I.value=n.offsetHeight),g.channels||(U.value=Math.floor(k.value/(a.height+a.top)));let S=function(Q){let b=[...Array(g.channels).keys()];g.randomChannel&&(b=b.sort(()=>.5-Math.random()));for(let x of b){const D=d.value[x];if(!D||!D.length)return d.value[x]=[Q],Q.addEventListener("animationend",()=>d.value[x].splice(0,1)),x%g.channels;for(let V=0;V<D.length;V++){const T=X(D[V])-10;if(T<=.88*(Q.offsetWidth-D[V].offsetWidth)||T<=0)break;if(V===D.length-1)return d.value[x].push(Q),Q.addEventListener("animationend",()=>d.value[x].splice(0,1)),x%g.channels}}return-1}(n);if(S>=0){const Q=n.offsetWidth,b=a.height;n.classList.add("move"),n.dataset.index=`${f}`,n.style.opacity="1",n.style.top=S*(b+a.top)+"px",n.style.width=Q+a.right+"px",n.style.setProperty("--dm-scroll-width",`-${l.value+Q}px`),n.style.left=`${l.value}px`,n.style.animationDuration=l.value/a.speeds+"s",n.addEventListener("animationend",()=>{Number(n.dataset.index)!==e.value.length-1||g.loop||A("play-end",n.dataset.index),s.value&&s.value.removeChild(n)}),h.value++}else s.value.removeChild(n)})}function X(r){const f=r.offsetWidth||parseInt(r.style.width),t=r.getBoundingClientRect().right||s.value.getBoundingClientRect().right+f;return s.value.getBoundingClientRect().right-t}function L(){clearInterval(w),w=0,h.value=0}return P(()=>{Y()}),$(()=>{L()}),{container:v,dmContainer:s,hidden:M,paused:y,danmuList:e,getPlayState:function(){return!y.value},resize:function(){z();const r=s.value.getElementsByClassName("dm");for(let f=0;f<r.length;f++){const t=r[f];t.style.setProperty("--dm-scroll-width",`-${l.value+t.offsetWidth}px`),t.style.left=`${l.value}px`,t.style.animationDuration=l.value/a.speeds+"s"}},play:o,pause:function(){y.value=!0},stop:function(){d.value={},s.value.innerHTML="",y.value=!0,M.value=!1,L()},show:function(){M.value=!1},hide:function(){M.value=!0},reset:function(){I.value=0,Y()},add:function(r){if(h.value===e.value.length)return e.value.push(r),e.value.length-1;{const f=h.value%e.value.length;return e.value.splice(f,0,r),f+1}},push:function(r){return e.value.push(r),e.value.length-1},insert:F}}});const ie={ref:"container",class:"vue-danmaku"};(function(u,A){A===void 0&&(A={});var B=A.insertAt;if(typeof document!="undefined"){var v=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css",B==="top"&&v.firstChild?v.insertBefore(s,v.firstChild):v.appendChild(s),s.styleSheet?s.styleSheet.cssText=u:s.appendChild(document.createTextNode(u))}})(`.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: 100;
}
@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));
  }
}`),N.render=function(u,A,B,v,s,l){return J(),_("div",ie,[p("div",{ref:"dmContainer",class:Z(["danmus",{show:!u.hidden},{paused:u.paused}])},null,2),q(u.$slots,"default")],512)},N.__file="src/lib/Danmaku.vue";const de={class:"card-header"},re={class:"font-medium"},me={class:"flex gap-5"},pe={class:"danmu-item"},fe=["src"],ce={class:"main"},ve={class:"ml-5"},ge={class:"ml-5"},he={class:"ml-5"},Ce={class:"flex"},Be=H({name:"Danmaku",__name:"index",setup(u){const A=C(),B=C(j()),v=C("");let s=0;const l=G({channels:5,useSlot:!0,loop:!0,speeds:200,fontSize:20,top:10,right:0,debounce:100,randomChannel:!0});P(()=>{window.onresize=()=>M()}),Ae(()=>{window.onresize=null});function k(d){switch(d){case"play":A.value.play();break;case"pause":A.value.pause();break;case"stop":A.value.stop();break;case"show":A.value.show();break;case"hide":A.value.hide();break;case"reset":A.value.reset();break}}function w(d){l.useSlot=d,B.value=d?j():O,setTimeout(()=>{A.value.stop(),A.value.play()})}function U(d){l.speeds<=10&&d===-10||(l.speeds+=d,A.value.reset())}function I(d){l.fontSize+=d,A.value.reset()}function h(d){!l.channels&&d===-1||(l.channels+=d)}function M(){s&&clearTimeout(s),s=window.setTimeout(()=>{A.value.resize()},500)}function y(){if(!v.value)return;const d=l.useSlot?{avatar:"https://i.loli.net/2021/01/17/xpwbm3jKytfaNOD.jpg",name:"你",text:v.value}:v.value;A.value.add(d),v.value=""}return(d,e)=>{const g=K("el-link"),a=K("el-button"),Y=K("el-input"),z=K("el-card");return J(),ae(z,{shadow:"never"},{header:m(()=>[p("div",de,[p("span",re,[i(" 弹幕组件，采用开源的 "),c(g,{href:"https://github.com/hellodigua/vue-danmaku/tree/vue3",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:m(()=>[i(" vue3-danmaku ")]),_:1})])]),c(g,{class:"mt-2",href:"https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/danmaku",target:"_blank"},{default:m(()=>[i(" 代码位置 src/views/able/danmaku ")]),_:1})]),default:m(()=>[p("div",me,[c(le(N),se({ref_key:"danmaku",ref:A,danmus:B.value,"onUpdate:danmus":e[0]||(e[0]=o=>B.value=o),class:"demo",isSuspend:""},l),{dm:m(({danmu:o,index:F})=>[p("div",pe,[p("img",{class:"img",src:o.avatar},null,8,fe),p("span",null,R(F)+R(o.name)+"：",1),p("span",null,R(o.text),1)])]),_:1},16,["danmus"]),p("div",ce,[p("p",null,[i(" 播放： "),c(a,{onClick:e[1]||(e[1]=o=>k("play"))},{default:m(()=>[i("播放")]),_:1}),c(a,{onClick:e[2]||(e[2]=o=>k("pause"))},{default:m(()=>[i("暂停")]),_:1}),c(a,{onClick:e[3]||(e[3]=o=>k("stop"))},{default:m(()=>[i("停止")]),_:1})]),p("p",null,[i(" 模式： "),c(a,{onClick:e[4]||(e[4]=o=>w(!0))},{default:m(()=>[i("弹幕 slot")]),_:1}),c(a,{onClick:e[5]||(e[5]=o=>w(!1))},{default:m(()=>[i("普通文本")]),_:1})]),p("p",null,[i(" 显示： "),c(a,{onClick:e[6]||(e[6]=o=>k("show"))},{default:m(()=>[i("显示")]),_:1}),c(a,{onClick:e[7]||(e[7]=o=>k("hide"))},{default:m(()=>[i("隐藏")]),_:1})]),p("p",null,[i(" 速度： "),c(a,{onClick:e[8]||(e[8]=o=>U(-10))},{default:m(()=>[i("减速")]),_:1}),c(a,{onClick:e[9]||(e[9]=o=>U(10))},{default:m(()=>[i("增速")]),_:1}),p("span",ve,"当前速度："+R(l.speeds)+"像素/s",1)]),p("p",null,[i(" 字号： "),c(a,{disabled:l.useSlot,onClick:e[10]||(e[10]=o=>I(-1))},{default:m(()=>[i(" 缩小 ")]),_:1},8,["disabled"]),c(a,{disabled:l.useSlot,onClick:e[11]||(e[11]=o=>I(1))},{default:m(()=>[i(" 放大 ")]),_:1},8,["disabled"]),p("span",ge,"当前字号："+R(l.fontSize)+"px",1)]),p("p",null,[i(" 轨道： "),c(a,{onClick:e[12]||(e[12]=o=>h(-1))},{default:m(()=>[i("-1")]),_:1}),c(a,{onClick:e[13]||(e[13]=o=>h(1))},{default:m(()=>[i("+1")]),_:1}),c(a,{onClick:e[14]||(e[14]=o=>h(-l.channels))},{default:m(()=>[i(" 填满 ")]),_:1}),p("span",he,"当前轨道："+R(l.channels),1)]),p("p",Ce,[c(Y,{modelValue:v.value,"onUpdate:modelValue":e[15]||(e[15]=o=>v.value=o),type:"text",placeholder:"输入评论后，回车发送弹幕",onKeyup:oe(y,["enter"])},null,8,["modelValue"])])])])]),_:1})}}}),Qe=ue(Be,[["__scopeId","data-v-d4dc730e"]]);export{Qe as default};