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

基于vue3的移动端组件库

"use strict";const e=require("vue"),x=require("../icon/index.cjs");require("./input.vue_vue_type_style_index_0_lang.cjs");const B={class:"uv-input"},V=["disabled","type","value","placeholder","readonly"],k=["disabled","value","placeholder","readonly"],S={key:0,class:"uv-input-word-limit"},z={name:"UvInput"},w=Object.assign(z,{props:{modelValue:{type:[String,Number],default:""},type:{type:String,default:"text"},placeholder:{type:String,default:"\u8BF7\u8F93\u5165"},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},border:{type:Boolean,default:!1},formatter:{type:Function},formatTrigger:{type:String,default:"change"},inputAlign:{type:String,default:"left"},autosize:{type:[Boolean,Object],default:!1},maxlength:{type:Number},showWordLimit:{type:Boolean,default:!1}},emits:["update:modelValue","change","blur","focus","keydown"],setup(l,{emit:n}){const o=l,{props:i,validateBlurOrChange:d}=e.inject("form-item",{}),h=()=>{n("update:modelValue","")},u=e.ref(null);e.watch(()=>o.modelValue,a=>{o.maxlength&&c(a),o.autosize&&o.type==="textarea"&&e.nextTick(()=>{if(typeof o.autosize=="boolean")u.value.style.height=u.value.scrollHeight+"px";else if(Object.prototype.toString.call(o.autosize)==="[object Object]"){const{maxHeight:t}=o.autosize;u.value.style.height=u.value.scrollHeight<t?u.value.scrollHeight+"px":t+"px"}})});const r=e.computed(()=>Array.from(o.modelValue).length),p=()=>{var a;return String((a=o.modelValue)!=null?a:"")},v=(a,t)=>(console.log(t),[...a].slice(0,t).join("")),b=a=>{const{maxlength:t}=o;if(t&&r.value>t){const m=p();return m&&r.value===+t?m:v(a,+t)}return a},c=a=>{let t=a;t=b(t),o.formatter&&o.formatTrigger==="change"&&(t=o.formatter(t)),n("update:modelValue",t)},s=a=>{const{value:t}=a.target;c(t),n("change",t),i&&d("change")},g=a=>{if(o.formatter&&o.formatTrigger==="blur"){let{value:t}=a.target;t=o.formatter(t),n("update:modelValue",t)}n("blur"),i&&d("blur")},y=()=>{n("focus")},f=a=>{n("keydown",a)};return(a,t)=>(e.openBlock(),e.createElementBlock("div",{class:"uv-input-wrap",style:e.normalizeStyle({border:l.border?"1px solid #eeeeee":""})},[e.createElementVNode("div",B,[l.type!=="textarea"?(e.openBlock(),e.createElementBlock("input",{key:0,style:e.normalizeStyle({textAlign:l.inputAlign}),disabled:l.disabled,type:l.type,value:l.modelValue,placeholder:l.placeholder,readonly:l.readonly,onInput:s,onBlur:g,onFocus:y,onKeydown:f},null,44,V)):(e.openBlock(),e.createElementBlock("textarea",{key:1,ref_key:"textareaRef",ref:u,style:e.normalizeStyle({textAlign:l.inputAlign,height:l.autosize&&l.autosize.minHeight?l.autosize.minHeight+"px":"60px"}),disabled:l.disabled,value:l.modelValue,placeholder:l.placeholder,readonly:l.readonly,autoHeight:!0,onInput:s,onBlur:g,onFocus:y,onKeydown:f},null,44,k)),l.modelValue&&l.clearable?(e.openBlock(),e.createBlock(e.unref(x),{key:2,onClick:h,name:"error",color:"#96b3d7",size:"22"})):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"right")]),l.showWordLimit&&l.maxlength?(e.openBlock(),e.createElementBlock("div",S,e.toDisplayString(e.unref(r))+" / "+e.toDisplayString(l.maxlength),1)):e.createCommentVNode("",!0)],4))}});module.exports=w;