notice-bar-vue/dist/notice-bar-vue.umd.js

基于Vue3的无线滚动通知栏组件

(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(e=typeof globalThis<"u"?globalThis:e||self,e["notice-bar-vue"]=o(e.Vue))})(this,function(e){"use strict";var o=document.createElement("style");o.textContent=`.scroll{width:100%;overflow:hidden}.bar-wrap{display:flex;overflow:hidden;width:max-content;transition:all 0ms ease-in 0s}
`,document.head.appendChild(o);const r=e.defineComponent({name:"NoticeBar",props:{width:{type:String,default:"100%"},height:{type:String,default:"200px"},direction:{type:String,default:"row"}},setup(n,i){let u=e.ref(!1),a=e.ref(0);const l=e.ref();e.onMounted(()=>{n.direction=="row"?m():h()});const m=()=>{const s=l.value.offsetWidth;function t(){u.value||(a.value-=.5),l.value.style.transform="translateX("+a.value+"px)",Math.abs(a.value)<Math.abs(s/2)||(a.value=0),requestAnimationFrame(t)}requestAnimationFrame(t)},h=()=>{const s=l.value.offsetHeight;function t(){u.value||(a.value-=.5),l.value.style.transform="translateY("+a.value+"px)",Math.abs(a.value)<Math.abs(s/2)||(a.value=0),requestAnimationFrame(t)}requestAnimationFrame(t)},c=()=>{u.value=!0},p=()=>{u.value=!1};return i.expose({pause:c,play:p}),()=>{var s,t,d,f;return e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"scroll",style:{height:n.direction=="column"?n.height:"auto",width:n.width}},[e.createVNode("div",{class:"bar-wrap",ref:l,style:{"flex-direction":n.direction}},[(t=i==null?void 0:(s=i.slots).default)==null?void 0:t.call(s),(f=i==null?void 0:(d=i.slots).default)==null?void 0:f.call(d)])])])}}});return r.install=function(n){n.component(r.name,r)},r});