低代码第二篇 组件封装【表单组件】 普通文本

输入框属性

序号	属性值	默认值	描述
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>
  <input disabled="{{!formitem.canedit}}" bindinput="inputchange" placeholder="请填写{{formitem.title}}" value="{{formitem.defvalue}}"></input>
</view>

js代码

// component/wxe/SimpleText.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      formitem: {
        type: Object,
        value: {title:'单行文本',defvalue:'测试数据',canedit:false}
      }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    inputchange:function(e){
      let val =  e.detail.value;
      var parma={};
      parma.defvalue=val;
      parma.fieldname=this.data.formitem.fieldname
      parma.deftext=null;
      this.triggerEvent("itemchange", parma, {})
    }
  }
})

css代码

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