低代码第二篇 组件封装【表单组件】 数据选择器

  选择器属性

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

页面代码

<view class="flex bg-white {{formitem.border?'border-top':'' }}">
      <view class="flex-sub padding-sm margin-xs ">{{formitem.title}}：</view>
      <view class="flex-twice  padding-sm margin-xs radius" data-linkurl="{{formitem.linkpage}}" bindtap="goselect">{{formitem.deftext?formitem.deftext:'请选择'+formitem.title}}</view>
</view>

js代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    formitem: {
      type: Object,
      value: {title:'数据选择器',defvalue:null,canedit:false}
    }
  },
 
  /**
   * 组件的初始数据
   */
  data: {
 
  },
 
  /**
   * 组件的方法列表 
   */
  methods: {
    goselect:function(e){
      console.log(this.data.formitem)
      wx.navigateTo({
        url: '/'+this.data.formitem.linkpage+'?filedname='+this.data.formitem.fieldname+"&defvalue="+this.data.formitem.defvalue+"&deftext="+this.data.formitem.deftext,
      })
    }
  }
})

css代码

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