刚刚接触typescript ,而且在微信开发中使用了TDesign 组件,然后就开始各种茫然了。
耗在有demo.
这里解决了一个写表单然后传值的问题。
上代码 wxml界面
<block wx:for="{{items}}" wx:key="items" style="z-index:1;">
<t-input wx:if="{{item.lx=='phone'}}"
data-index="{{index}}"
value="{{item.value?item.value:''}}"
tips="{{item.phoneVerify ? '':'手机号输入不正确'}}" bindchange="inputChangeData"
type="number" label="{{item.title+' : '}}"
placeholder="请输入..." />
</block>
index->指向items的下表是一个固定的配置
value->input控件中显示的值
tips->t-input组件用于提示的内容,这里显示手机号码是否正确
bindchange->绑定数据改变的函数,用于刷新数据。
number->让控件只能输入数字
label-> 前缀
placeholder->提示内容
这里是循环读取表单的字段,然后进行组织表单的操作。这里写的是其中的“联系方式一栏”
items结构:[ {
id: 7,
zd: ‘phone’,
title: ‘联系方式’,
lx: ‘phone’,
value: “”,
phoneVerify:true}]
仅供参考。
{
"usingComponents": {
"t-demo": "./components/demo-block/index",
"t-button": "tdesign-miniprogram/button/button",
"t-icon": "tdesign-miniprogram/icon/icon",
"t-input": "tdesign-miniprogram/input/input"
"t-cell": "tdesign-miniprogram/cell/cell",
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
"t-picker": "tdesign-miniprogram/picker/picker",
"t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
"t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
}
}
主要是引入TDesign中的组件,我没有使用npm,所以直接把包打过来了。(电脑过于陈旧。)
//这里主要是input数据改变的时候触发的函数
inputChangeData(e) {
//控件中输入的值,每一次更新都会调用此方法。
let value = e.detail.value,
//在block循环中的下表,用于找到对应的项。
index = e.target.dataset.index;
console.log("inputChangeData", e.detail.value, index);
//这里是一种赋值方式,命名一个items,并且找到this.data中的items,赋值给他。
const { items} = this.data;
items[index].value = value;
//这里是一个简答验证手机号的正则。
if (items[index].lx == "phone") {
const isPhoneNumber = /^[1][3,4,5,7,8,9][0-9]{9}$/.test(value);
items[index].phoneVerify=isPhoneNumber;
} else {//当字段为其他类型的时候。
}
//更新界面
this.setData({
items: items
})
},
文章过于简陋,主要解决和记录使用TDesign中input传值问题。
如有不正确的地方还请指正