uv-ui/lib/components/side-bar/side-bar.cjs

基于vue3的移动端组件库

"use strict";const e=require("vue");require("./side-bar.vue_vue_type_style_index_0_lang.cjs");const v={class:"uv-side-bar"},y={class:"uv-side-bar-left"},_=["onClick"],p={class:"uv-side-bar-right"},k={name:"UvSideBar"},b=Object.assign(k,{props:{modelValue:{type:Number,default:0},lineWidth:{type:String,default:"4px"},lineColor:{type:String,default:"#1989fa"},list:{type:Array}},emits:["update:modelValue"],setup(n,{emit:u}){const d=n,f=t=>{u("update:modelValue",t);const{offsetHeight:l,offsetTop:o}=i.value[t];r(l,o)},a=e.ref(null),i=e.ref(null),s=e.ref(null),r=(t,l)=>{s.value.style.height=`${t/2}px`,s.value.style.transform=`translateY(${l+t/4}px)`};e.onMounted(()=>{m()});const m=()=>{i.value=a.value.querySelectorAll(".uv-side-bar-left-cotent-item");const{offsetHeight:t,offsetTop:l}=i.value[d.modelValue];setTimeout(()=>{s.value.style.transition="transform 0.3s"},300),r(t,l)};return(t,l)=>(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("div",y,[e.createElementVNode("div",{class:"uv-side-bar-left-cotent",ref_key:"contentRef",ref:a},[e.createElementVNode("div",{ref_key:"lineRef",ref:s,class:"uv-side-bar-item-line",style:e.normalizeStyle({width:n.lineWidth,backgroundColor:n.lineColor})},null,4),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.list,(o,c)=>(e.openBlock(),e.createElementBlock("div",{onClick:h=>f(c),class:e.normalizeClass(["uv-side-bar-left-cotent-item",n.modelValue===c?"uv-side-bar-left-cotent-item-active":""]),key:o},e.toDisplayString(o),11,_))),128))],512)]),e.createElementVNode("div",p,[e.renderSlot(t.$slots,"default")])]))}});module.exports=b;