低代码第二篇 组件封装【表单组件】 金额组件

 输入框属性

序号	属性值	默认值	描述
1	title	文本	字段标题
2	canedit	true	该表单是否可编辑，默认为true，即可编辑
3	defvalue	“”	字段默认值，默认为空
4	isshow	true	该字段可见性，默认为可见

页面代码

<view class="{{formitem.border?'cu-form-group border-top':'cu-form-group' }}  ">
    <view class="title">{{formitem.title}}：</view>
    <text class="text-price amount-text"></text>
    <input bindinput="limitinput" filename="{{formitem.fieldname}}" value="{{formitem.defvalue}}" placeholder='请填写{{formitem.title}}' disabled="{{!formitem.canedit}}"></input>
</view>

js代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    formitem: {
      type: Object,
      value: {fieldname:'',title:'金额',defvalue:'0',canedit:false}
    }
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    money:"",
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    limitinput:function(data){
      let money =  this.money(data.detail.value);
      this.setData({
        money:money
      })
      var parma={};
      parma.defvalue=money;
      parma.fieldname=this.data.formitem.fieldname
      parma.deftext=null;
      this.triggerEvent("itemchange", parma, {})
      // return money;
    },
    money(val) {
      let num = val.toString(); //先转换成字符串类型
      if (num.indexOf('.') == 0) { //第一位就是 .
         num = '1' + num
      } else if (num.indexOf('0') == 0) {
         num = ''
      }
      num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
      if (num.indexOf(".") < 0 && num != "") {
         num = parseFloat(num);
      }
      return num
   }
  }
})

css代码

/* component/wxe/MultiText.wxss */
@import "/colorui/main.wxss";
@import "/colorui/icon.wxss";
.border-top{
  border-top: 1rpx solid #eee;
}