低代码第二篇 组件封装【表单组件】 日期选择组件

  输入框属性

序号	属性值	默认值	描述
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>
        <picker mode="date" disabled="{{!formitem.canedit}}" data-fieldname="{{formitem.fieldname}}" value="{{formitem.defvalue}}" start="{{formitem.startdate}}" end="{{formitem.enddate}}" bindchange="DateChange">
            <view class="picker">
        {{formitem.defvalue}}
            </view>
        </picker>
    </view>

js代码

// component/wxe/datepick.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    formitem: {
      type: Object,
      value: {fieldname:'',title:'日期控件',defvalue:'2021-02-21',canedit:false,startdate:'2000-01-01',enddate:'2069-12-31'}
    }
  },
 
  /**
   * 组件的初始数据
   */
  data: {
 
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    DateChange(e){
      //console.log(e)
      this.setData({
        defvalue: e.detail.value
      });
      var parma={};
      parma.defvalue=e.detail.value;
      parma.fieldname=e.currentTarget.dataset.fieldname;
 
      this.triggerEvent("itemchange", parma, {})
    }
  }
})

css代码

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