vue-pure-admin/dist/static/js/index22.js

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