uni-bullet-screen
Version:
弹幕组件 for uni-app and 微信小程序
3 lines (2 loc) • 5.38 kB
JavaScript
(function(c,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c.BulletScreen={},c.Vue))})(this,function(c,e){"use strict";var h=document.createElement("style");h.textContent=`@charset "UTF-8";.bullet-screen-container[data-v-cd1fc12a]{position:relative;display:flex;max-height:110rpx;padding-bottom:40rpx;width:100%;overflow:hidden;white-space:nowrap}.bullet-screen-row[data-v-cd1fc12a]{animation:scroll-cd1fc12a linear infinite}.bullet-screen-row.no-animation[data-v-cd1fc12a]{animation:none}.bullet-screen-rows2[data-v-cd1fc12a]{animation:animate2-cd1fc12a linear infinite}.bullet-screen-rows2.no-animation[data-v-cd1fc12a]{animation:none}.bullet[data-v-cd1fc12a]{display:inline-flex;flex-shrink:0;flex-direction:row;align-items:center;position:relative;font-size:14px;min-width:130rpx;margin-right:12px;padding:4px 8px;color:#fff;border-radius:24px;box-shadow:0 2px 4px #f9f9f933}.bullet[data-v-cd1fc12a]:after{content:"";position:absolute;left:var(--bullet-after-left);bottom:-18rpx;border-left:var(--border-lefts) solid transparent;border-right:var(--border-rights) solid transparent;border-top:22rpx solid var(--bd-colors);transform:skew(var(--skew-x-deg))}.single-line-ellipsis[data-v-cd1fc12a]{max-width:280rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes scroll-cd1fc12a{0%{transform:translate(100%)}to{transform:translate(-100%)}}@keyframes animate2-cd1fc12a{0%{transform:translate(10%)}to{transform:translate(-200%)}}
`,document.head.appendChild(h);const y={key:0},E={class:"relative"},x=["onClick"],B=["src"],v={class:"single-line-ellipsis"},S={class:"relative"},b=["onClick"],C=["src"],F={class:"single-line-ellipsis"},V=e.defineComponent({__name:"BulletScreen",props:{bullets:{},rows:{default:2},speed:{default:30},colors:{default:()=>["#3C4654","#BA5140","#8F6D5F","#0E6E86","#A9A082"]}},emits:["click"],setup(d,{emit:g}){function p(a){if(a===null||typeof a!="object")return a;if(Array.isArray(a))return a.map(s=>p(s));const i={};for(const s in a)Object.prototype.hasOwnProperty.call(a,s)&&(i[s]=p(a[s]));return i}const n=d,l=e.ref([]),f=e.ref([]),u=e.ref(!1),A=()=>{if(!n.bullets||!n.rows||n.bullets.length===0||n.rows<=0){l.value=[],f.value=[];return}f.value=[];const a=n.bullets.length,i=Math.ceil(a/n.rows);l.value=[];let s=0;for(let r=0;r<n.rows;r++){const t=r*i,o=t+i,m=p(n.bullets.slice(t,o).map((k,$)=>(k.color=n.colors[(s+r+$)%n.colors.length],s++,k)));l.value.push(m);const _=D(m,r);f.value.push(_)}},D=(a,i)=>{const s=n.bullets.length<=8?9:n.speed||30,r=1.5,t=a.length,o=Math.ceil(s+t*r),m=i%2===0?0*5:5,_=o+m;return Math.max(_,n.bullets.length<8?12:19)},z=()=>{u.value=!1},T=()=>{setTimeout(()=>{u.value=!0},100)};return e.watch(()=>n.bullets,()=>{z(),A(),T()},{immediate:!0,deep:!1}),e.onMounted(()=>{}),e.onBeforeUnmount(()=>{}),(a,i)=>l.value&&l.value.length>0?(e.openBlock(),e.createElementBlock("view",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.rows,(s,r)=>(e.openBlock(),e.createElementBlock("view",{key:r,class:"bullet-screen-container"},[e.createElementVNode("view",{class:e.normalizeClass(["bullet-screen-row",{"no-animation":!u.value}]),style:e.normalizeStyle({animationDuration:u.value?`${f.value[r]}s`:"0s"})},[e.createElementVNode("view",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value[r],(t,o)=>(e.openBlock(),e.createElementBlock("view",{class:"bullet absolute",onClick:m=>a.$emit("click",t),key:o,style:e.normalizeStyle({background:(t==null?void 0:t.color)||"#0E6E86",top:o%2===0?"6px":"0",left:0,"--bdColors":t.color||"#0E6E86","--borderLefts":o%2===0?"24rpx":"8rpx","--borderRights":o%2===0?"8rpx":"24rpx","--skewXDeg":o%2===0?"180deg":"0deg","--bullet-after-left":o%2===0?"65%":"10%"})},[e.createElementVNode("image",{src:t.avatar,mode:"scaleToFill",class:"w-4 h-4 rounded-full mr-1"},null,8,B),e.createElementVNode("span",v,e.toDisplayString(t.content),1)],12,x))),128))])],6),e.createElementVNode("view",{class:e.normalizeClass(["bullet-screen-rows2",{"no-animation":!u.value}]),style:e.normalizeStyle({animationDuration:`${f.value[r]}s`,animationDelay:`${f.value[r]/-2}s`})},[e.createElementVNode("view",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value[r],(t,o)=>(e.openBlock(),e.createElementBlock("view",{class:"bullet absolute",onClick:m=>a.$emit("click",t),key:o,style:e.normalizeStyle({background:(t==null?void 0:t.color)||"#0E6E86",top:o%2===0?"6px":"0",left:0,"--bdColors":t.color||"#0E6E86","--borderLefts":o%2===0?"24rpx":"8rpx","--borderRights":o%2===0?"8rpx":"24rpx","--skewXDeg":o%2===0?"180deg":"0deg","--bullet-after-left":o%2===0?"65%":"10%"})},[e.createElementVNode("image",{src:t.avatar?t.avatar:"https://cdn.docoi.cc/tea_friend/avatars/default_avatar_77_77.png",mode:"scaleToFill",class:"w-20px h-20px rounded-full mr-1"},null,8,C),e.createElementVNode("span",F,e.toDisplayString(t.content||""),1)],12,b))),128))])],6)]))),128))])):e.createCommentVNode("",!0)}}),M="",w=((d,g)=>{const p=d.__vccOpts||d;for(const[n,l]of g)p[n]=l;return p})(V,[["__scopeId","data-v-cd1fc12a"]]),N={install:d=>{d.component("BulletScreen",w)}};c.BulletScreen=w,c.default=N,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});