epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 1.65 kB
JavaScript
;const e=require("vue");;/* empty css */require("vuedraggable");require("@vueuse/core");require("../../../../../hooks/src/store/index.cjs");const o=require("../../../../../utils/src/manager/pluginManager.cjs"),x=e.defineComponent({__name:"index",props:{modelValue:{}},emits:["update:modelValue"],setup(i,{emit:v}){const p=i,s=v,m=o.pluginManager.getComponent("input"),d=o.pluginManager.getComponent("select"),l=e.ref(null),t=e.ref("px"),f=[{label:"px",value:"px"},{label:"%",value:"%"},{label:"vw",value:"vw"},{label:"vh",value:"vh"},{label:"rem",value:"rem"},{label:"em",value:"em"},{label:"pt",value:"pt"}];e.watch(()=>p.modelValue,n=>{if(!n)return;if(typeof n=="number"){l.value=String(n),t.value="px";return}const u=Number.parseFloat(n);if(Number.isNaN(u))return l.value=null,!1;const a=/^(\d+(\.\d+)?)(px|%|vw|vh|rem|em|pt)$/,r=n.trim().match(a);l.value=(r==null?void 0:r[1])??null,t.value=(r==null?void 0:r[3])??""},{immediate:!0}),e.watch(()=>t.value+l.value,()=>{c()});function c(){e.nextTick(()=>s("update:modelValue",l.value?l.value+t.value:void 0))}return(n,u)=>(e.openBlock(),e.createBlock(e.unref(m),{modelValue:l.value,"onUpdate:modelValue":u[2]||(u[2]=a=>l.value=a),value:l.value,"onUpdate:value":u[3]||(u[3]=a=>l.value=a),class:"epic-input-size",type:"number",min:"0",placeholder:"请输入"},{suffix:e.withCtx(()=>[e.createVNode(e.unref(d),{value:t.value,"onUpdate:value":u[0]||(u[0]=a=>t.value=a),modelValue:t.value,"onUpdate:modelValue":u[1]||(u[1]=a=>t.value=a),style:{width:"68px"},options:f},null,8,["value","modelValue"])]),_:1},8,["modelValue","value"]))}});module.exports=x;