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

 输入框属性

序号	属性值	默认值	描述
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>
  <view class="text-left {{!formitem.canedit?'cannotedit':''}} "  bindtap="openselect">{{formitem.deftext?formitem.deftext:'请选择'+formitem.title}}</view>
  <view class="cuIcon-right lg text-gray" wx:if="{{formitem.canedit}}"></view>
  <!-- <input disabled="{{!formitem.canedit}}" value="{{formitem.defvalue}}"></input> -->
</view>
 
<view class="cu-modal {{showoption?'show':''}}" bindtap="hideModal">
  <view class="cu-dialog option-window" catchtap>
 
    <view class="margin-xs padding-sm solids-bottom " wx:for="{{formitem.options}}" wx:key="id" 
    data-id="{{item.id}}" data-text="{{item.text}}" bindtap="selectchange">
      <view class="flex flex-wrap ">
        <view class="basis-xl text-left">{{item.text}}</view>
        <view class="basis-xs {{item.id==formitem.defvalue?'cuIcon-roundcheck':'cuIcon-round'}} lg text-blue  text-right">
        </view>
      </view>
    </view>
 
  </view>
</view>

js代码

// component/wxe/simpleselectsingle.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    formitem: {
      type: Object,
      value: {title:'普通单选',defvalue:'001',deftext:null,canedit:false,options:[{id:'001',text:'选项1'},{id:'002',text:'选项2'},,{id:'003',text:'选项3'}]}
    }
 
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    showoption:false
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    selectchange:function(e){
      var id_=e.currentTarget.dataset.id;
      var text_=e.currentTarget.dataset.text;
      this.setData({
        ['formitem.defvalue']: id_,
        ['formitem.deftext']:text_,
        showoption: false
      });
      var parma={};
      parma.defvalue=id_;
      parma.fieldname=this.data.formitem.fieldname
      parma.deftext=text_;
      this.triggerEvent("itemchange", parma, {})
    },
    openselect:function(e){
      console.log("openselect");
      this.setData({
        showoption: true
      })
    }
  }
  
})

css代码

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