| 1 |
- import{_ as e,o as t,p as l,w as u,f as a,B as i,a4 as n,k as s,C as o,i as d,Y as c,b as m,d as r}from"./index-2PZN6pGH.js";import{_ as p}from"./uni-card.CpdfOoXJ.js";import{_ as h}from"./uni-section.BISPxi99.js";const b=e({name:"UniNumberBox",emits:["change","input","update:modelValue","blur","focus"],props:{value:{type:[Number,String],default:1},modelValue:{type:[Number,String],default:1},min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},background:{type:String,default:"#f5f5f5"},color:{type:String,default:"#333"},disabled:{type:Boolean,default:!1}},data:()=>({inputValue:0}),watch:{value(e){this.inputValue=+e},modelValue(e){this.inputValue=+e}},created(){1===this.value&&(this.inputValue=+this.modelValue),1===this.modelValue&&(this.inputValue=+this.value)},methods:{_calcValue(e){if(this.disabled)return;const t=this._getDecimalScale();let l=this.inputValue*t,u=this.step*t;if("minus"===e){if(l-=u,l<this.min*t)return;l>this.max*t&&(l=this.max*t)}if("plus"===e){if(l+=u,l>this.max*t)return;l<this.min*t&&(l=this.min*t)}this.inputValue=(l/t).toFixed(String(t).length-1),this.$emit("change",+this.inputValue),this.$emit("input",+this.inputValue),this.$emit("update:modelValue",+this.inputValue)},_getDecimalScale(){let e=1;return~~this.step!==this.step&&(e=Math.pow(10,String(this.step).split(".")[1].length)),e},_onBlur(e){this.$emit("blur",e);let t=e.detail.value;if(!t)return;t=+t,t>this.max?t=this.max:t<this.min&&(t=this.min);const l=this._getDecimalScale();this.inputValue=t.toFixed(String(l).length-1),this.$emit("change",+this.inputValue),this.$emit("input",+this.inputValue)},_onFocus(e){this.$emit("focus",e)}}},[["render",function(e,m,r,p,h,b){const f=o,g=d,V=c;return t(),l(g,{class:"uni-numbox"},{default:u((()=>[a(g,{onClick:m[0]||(m[0]=e=>b._calcValue("minus")),class:"uni-numbox__minus uni-numbox-btns",style:i({background:r.background})},{default:u((()=>[a(f,{class:n(["uni-numbox--text",{"uni-numbox--disabled":h.inputValue<=r.min||r.disabled}]),style:i({color:r.color})},{default:u((()=>[s("-")])),_:1},8,["class","style"])])),_:1},8,["style"]),a(V,{disabled:r.disabled,onFocus:b._onFocus,onBlur:b._onBlur,class:"uni-numbox__value",type:"number",modelValue:h.inputValue,"onUpdate:modelValue":m[1]||(m[1]=e=>h.inputValue=e),style:i({background:r.background,color:r.color})},null,8,["disabled","onFocus","onBlur","modelValue","style"]),a(g,{onClick:m[2]||(m[2]=e=>b._calcValue("plus")),class:"uni-numbox__plus uni-numbox-btns",style:i({background:r.background})},{default:u((()=>[a(f,{class:n(["uni-numbox--text",{"uni-numbox--disabled":h.inputValue>=r.max||r.disabled}]),style:i({color:r.color})},{default:u((()=>[s("+")])),_:1},8,["class","style"])])),_:1},8,["style"])])),_:1})}],["__scopeId","data-v-f601d918"]]);const f=e({components:{},data:()=>({numberValue:0,vModelValue:3}),methods:{change(e){this.numberValue=e},changeValue(e){console.log("返回数值：",e)},blur(e){console.log("-------blur:",e)},focus(e){console.log("-------focus:",e)}}},[["render",function(e,i,n,c,f,g){const V=o,_=m(r("uni-card"),p),x=m(r("uni-number-box"),b),y=m(r("uni-section"),h),v=d;return t(),l(v,{class:"container"},{default:u((()=>[a(_,{"is-shadow":!1,"is-full":""},{default:u((()=>[a(V,{class:"uni-h6"},{default:u((()=>[s("数字输入框组件多用于购物车加减商品等场景")])),_:1})])),_:1}),a(y,{title:"基本用法",type:"line",padding:""},{default:u((()=>[a(x,{onChange:g.changeValue},null,8,["onChange"])])),_:1}),a(y,{title:"使用v-model : "+f.vModelValue,subTitle:"使用 v-model 显示默认值",type:"line",padding:""},{default:u((()=>[a(x,{modelValue:f.vModelValue,"onUpdate:modelValue":i[0]||(i[0]=e=>f.vModelValue=e),onBlur:g.blur,onFocus:g.focus,onChange:g.changeValue},null,8,["modelValue","onBlur","onFocus","onChange"])])),_:1},8,["title"]),a(y,{title:"设置最小值和最大值",subTitle:"使用 min \\ max 属性设置最大最小值",type:"line",padding:""},{default:u((()=>[a(x,{min:2,max:9,value:555})])),_:1}),a(y,{title:"设置步长（步长0.1)",subTitle:"使用 step 属性设置步长",type:"line",padding:""},{default:u((()=>[a(x,{value:1.1,step:.1})])),_:1}),a(y,{title:"自定义背景",type:"line",subTitle:"使用 background 属性设置自定义背景色",padding:""},{default:u((()=>[a(x,{value:50,background:"#2979FF",color:"#fff"})])),_:1}),a(y,{title:"禁用状态",subTitle:"使用 disabled 属性设置组件禁用",type:"line",padding:""},{default:u((()=>[a(x,{disabled:!0})])),_:1}),a(y,{title:"获取输入的值 : "+f.numberValue,type:"line",padding:""},{default:u((()=>[a(x,{value:f.numberValue,onChange:g.change},null,8,["value","onChange"])])),_:1},8,["title"])])),_:1})}]]);export{f as default};
|
