vuux/dist/lib/ImageCompare/src/index.vue.cjs

Vue3 Nuxt3 Nuxt4 组件库

"use strict";const e=require("vue"),p=require("./hook/useImageCompare.cjs"),h=require("@vuux/icons"),y={class:"image-compare-data"},k=["src"],E=["src"],I={key:0,class:"image-compare-labels"},_={class:"is-label"},x={class:"is-label"},C=e.defineComponent({name:"ImageCompare",__name:"index",props:{letfImage:{default:""},rightImage:{default:""},position:{default:50},text:{type:Boolean,default:!1},letfText:{default:""},rightText:{default:""},height:{default:"auto"}},emits:["drag"],setup(i,{expose:m,emit:c}){const t=i,u=c,r=e.useTemplateRef("imageCompareEl"),{position:l,containerHeight:d,onLoad:s,startDrag:n,resetPosition:f,setPosition:g}=p.useImageCompare(t,r,u);return m({resetPosition:f,setPosition:g}),(B,o)=>(e.openBlock(),e.createElementBlock("div",{class:"app-image-compare",ref_key:"imageCompareEl",ref:r,style:e.normalizeStyle({height:e.unref(d)})},[e.createElementVNode("div",y,[t.letfImage?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.letfImage,class:"is-image",onLoad:o[0]||(o[0]=(...a)=>e.unref(s)&&e.unref(s)(...a))},null,40,k)):e.createCommentVNode("",!0),t.rightImage?(e.openBlock(),e.createElementBlock("img",{key:1,src:t.rightImage,class:"is-image right-image",style:e.normalizeStyle({clipPath:`inset(0 0 0 ${e.unref(l)}%)`}),onLoad:o[1]||(o[1]=(...a)=>e.unref(s)&&e.unref(s)(...a))},null,44,E)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"image-compare-slider",style:e.normalizeStyle({left:`${e.unref(l)}%`}),onMousedown:o[2]||(o[2]=(...a)=>e.unref(n)&&e.unref(n)(...a)),onTouchstartPassive:o[3]||(o[3]=(...a)=>e.unref(n)&&e.unref(n)(...a))},[e.createVNode(e.unref(h.Icon),{name:"Icon7117462",class:"is-handle",color:"#fff"})],36)]),t.text?(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("span",_,e.toDisplayString(t.letfText),1),e.createElementVNode("span",x,e.toDisplayString(t.rightText),1)])):e.createCommentVNode("",!0)],4))}});module.exports=C;