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

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

 页面代码

<view class="{{formitem.border?'cu-form-group align-start border-top':'cu-form-group align-start' }}">
        <view class="title">{{formitem.title}}：</view>
        <textarea maxlength="-1" disabled="{{!formitem.canedit}}" bindinput="inputchange"  placeholder="请填写{{formitem.title}}" value="{{formitem.defvalue}}"></textarea>
    </view>

js代码

// component/wxe/MultiText.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;
}