Tdesign小程序开发问题解决记录

1. t-upload 预览图片的宽高控制

除了官方文档提到的使用flex-grow: 1; 外，相关链接：https://tdesign.tencent.com/miniprogram/components/upload#faq。还有一个控制一行显示多少张图片的参数，这个参数会根据参数把选择的图片全部显示在一行，默认的值貌似比较大，意味着同一行图片比较多，每个图片所占的区域也比较小。

js代码

  uploadGridConfig: {
      column: 2,
      height: 250
    }

wxml

 <t-form-item label="认证照片" name="photo">
                    <t-upload style="flex-grow: 1;" max="{{1}}" files="{{formData.photo}}" bind:add="onAddHandler" bind:remove="onRemoveHandler" mediaType="{{['image']}}" config="{{uploadConfig}}" grid-config="{{uploadGridConfig}}" image-props="{{uploadImageProps}}" />
 </t-form-item>

column参数就是控制每一行图片数量的参数，配合height即可设置单张图片的宽和高。

2. form表单规则实例

验证器的返回值是布尔类型的，多个条件用多个元素。

js

rules: {
      photo: [
        { required: true, validator: (val) => val && val.length > 0, message: "请上传照片" },
      ],
      name: [
        { required: true, message: "请输入姓名" },
        {
          validator: (val) => val.trim().length > 1,
          message: "请输入正确的姓名",
        },
      ],
      idCard: [
        {
          validator: (val) => {
            if (!val) {
              return false;
            }
            if (!checkIdCard(val)) {
              return false;
            }
            return true;
          },
          message:"请检查身份证是否正确"
        },
      ],
    }

wxml

<t-form id="form" data="{{formData}}" rules="{{rules}}" >
</t-form>