uv-ui/lib/components/slider/slider.cjs

基于vue3的移动端组件库

"use strict";const e=require("vue"),S=require("../../hooks/useTouch.cjs");require("../../hooks/useCountDown.cjs");require("./slider.vue_vue_type_style_index_0_lang.cjs");const V=["onTouchmove"],x={name:"UvSlider"},C=Object.assign(x,{props:{modelValue:{type:Number,default:0},inactiveColor:{type:String,default:"#ebedf0"},activeColor:{type:String,default:"#1989fa"},barHeight:{type:[String,Number],default:3},buttonSize:{type:[String,Number],default:24},disabled:{type:Boolean,default:!1},min:{type:Number,default:0},max:{type:Number,default:100}},emits:["update:modelValue","change","drag-start","drag-end"],setup(u,{emit:r}){const t=u,{props:v,validateBlurOrChange:f}=e.inject("form-item",{}),n=S.useTouch(),i=e.ref(null),m=e.ref(null),s=e.ref(""),a=e.ref(t.modelValue),d=e.ref(""),o=e.ref("");e.watch(()=>t.modelValue,l=>{l!==a.value&&(a.value=l)}),e.onMounted(()=>{s.value=i.value.offsetWidth});function h(l){n.start(l),a.value=t.modelValue,d.value=t.modelValue,o.value="start"}function g(l){if(t.disabled)return;o.value==="start"&&r("drag-start",l),n.move(l),o.value="dragging";const c=n.deltaX.value,y=s.value,p=parseInt(c/y*(t.max-t.min));a.value=d.value+p,a.value<t.min?a.value=t.min:a.value>t.max&&(a.value=t.max),r("update:modelValue",a.value)}function b(l){o.value==="dragging"&&(r("drag-end",l),r("change",t.modelValue)),o.value="",v&&f("change")}return(l,c)=>(e.openBlock(),e.createElementBlock("div",{class:"uv-slider",style:e.normalizeStyle({backgroundColor:u.inactiveColor,height:u.barHeight+"px"}),ref_key:"sliderRef",ref:i},[e.createElementVNode("div",{style:e.normalizeStyle({width:`${a.value}%`,backgroundColor:u.activeColor,height:u.barHeight+"px"}),class:e.normalizeClass(["uv-slider-value",u.disabled?"uv-slider-value-disabled":""])},[e.createElementVNode("div",{class:"uv-slider-circle",ref_key:"sliderValueRef",ref:m,onTouchstart:h,onTouchmove:e.withModifiers(g,["stop"]),onTouchend:b},[e.renderSlot(l.$slots,"button",{},()=>[e.createElementVNode("div",{class:"uv-slider-circle-content",style:e.normalizeStyle({width:u.buttonSize+"px",height:u.buttonSize+"px"})},null,4)])],40,V)],6)],4))}});module.exports=C;