scroll-tabs-vue3/scroll-tabs-vue3.umd.cjs

可滚动的tabs组件，出现滚动时左右显示滑动按钮

(function(e,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(e=typeof globalThis<"u"?globalThis:e||self,e["scroll-tabs-vue3"]=i(e.Vue))})(this,function(e){"use strict";const i=(l,d)=>{const a=l.__vccOpts||l;for(const[c,s]of d)a[c]=s;return a},w={class:"tabs-container"},V=["onClick"],v=e.defineComponent({name:"scrollTabsVue3"}),g=i(Object.assign(v,{props:{tabs:{type:Array,required:!0,default:()=>[]},tabName:{type:String,default:"name"},tabValue:{type:String},modelValue:{type:[Number,String],default:0}},emits:["update:modelValue"],setup(l,{emit:d}){const a=l,c=d,s=e.ref(null),f=e.ref(null),p=e.ref(!1),b=e.ref(!1),m=e.ref(!1),r=()=>{if(!s.value||!f.value)return;const n=s.value.offsetWidth,t=f.value.scrollWidth,o=s.value.scrollLeft;m.value=t>n,p.value=o>0,b.value=Math.abs(o+n-t)>2},h=n=>{const t=s.value.offsetWidth*.8,o=s.value.scrollLeft+t*n;s.value.scrollTo({left:o,behavior:"smooth"}),setTimeout(r,100)},k=n=>{a.tabValue?c("update:modelValue",a.tabs[n][a.tabValue]):c("update:modelValue",n)};return e.onMounted(()=>{window.addEventListener("resize",r),s.value.addEventListener("scroll",r),r()}),e.onUnmounted(()=>{var n;window.removeEventListener("resize",r),(n=s.value)==null||n.removeEventListener("scroll",r)}),(n,t)=>(e.openBlock(),e.createElementBlock("div",w,[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["scroll-button left",{disabled:!p.value}]),onClick:t[0]||(t[0]=o=>h(-1))},t[2]||(t[2]=[e.createElementVNode("svg",{t:"1742435005435",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"2452",width:"20",height:"20"},[e.createElementVNode("path",{d:"M265.3333332 565.33333291l376.6666667 376.6666667c26.6666669 26.6666669 69.99999961 26.6666669 93.33333369 0 26.6666669-26.6666669 26.6666669-69.99999961 0-93.33333281l-330.00000029-330.00000029 330.00000029-329.99999942c26.6666669-26.6666669 26.6666669-66.6666668 0-93.33333369s-69.99999961-26.6666669-93.33333369 0L265.3333332 472.0000001c-13.33333301 13.33333301-20.00000039 29.99999971-19.99999951 46.66666641 0 16.6666667 6.66666651 33.33333339 19.99999951 46.6666664",fill:"#666666","p-id":"2453"})],-1)]),2),[[e.vShow,m.value]]),e.createElementVNode("div",{class:"tabs-wrapper",ref_key:"wrapper",ref:s},[e.createElementVNode("div",{class:"tabs-content",ref_key:"content",ref:f},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.tabs,(o,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:e.normalizeClass(["tab-button",{active:l.modelValue===(l.tabValue?o[l.tabValue]:u)}]),onClick:L=>k(u)},e.toDisplayString(o[l.tabName]),11,V))),128))],512)],512),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["scroll-button right",{disabled:!b.value}]),onClick:t[1]||(t[1]=o=>h(1))},t[3]||(t[3]=[e.createElementVNode("svg",{t:"1742432478445",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"2294",width:"20",height:"20"},[e.createElementVNode("path",{d:"M758.6666668 458.66666709l-376.6666667-376.6666667c-26.6666669-26.6666669-69.99999961-26.6666669-93.33333369 0-26.6666669 26.6666669-26.6666669 69.99999961 0 93.33333281l330.00000029 330.00000029-330.00000029 329.99999942c-26.6666669 26.6666669-26.6666669 66.6666668 0 93.33333369s69.99999961 26.6666669 93.33333369 0L758.6666668 551.9999999c13.33333301-13.33333301 20.00000039-29.99999971 19.99999951-46.66666641 0-16.6666667-6.66666651-33.33333339-19.99999951-46.6666664",fill:"#666666","p-id":"2295"})],-1)]),2),[[e.vShow,m.value]])]))}}),[["__scopeId","data-v-5b2329a3"]]);return{install(l){l.component("scrollTabsVue3",g)}}});