[t-input] 新增required 属性

[synctimes163]

这个功能解决了什么问题

微信小程序 "tdesign-miniprogram": "^1.1.15"

t-input 组件经常遇到 加上 是否必填 *

类似 t-cell 组件中的 required 效果

目前 "tdesign-miniprogram": "^1.1.15" t-input 组件 无该功能。期望也能加上

你建议的方案是什么

微信小程序 "tdesign-miniprogram": "^1.1.15"

t-input 组件经常遇到 加上 是否必填 *

类似 t-cell 组件中的 required 效果

目前 "tdesign-miniprogram": "^1.1.15" t-input 组件 无该功能。期望也能加上

[github-actions]

👋 @synctimes163，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[liugt34]

我也遇到这个问题了，麻烦问下楼主当前是如何解决的？

[anlyyao]

@RADWIMPS426

[RADWIMPS426]

@Wen1kang

[DreamanFisher]

input是比较基础的一种组件，而给它增加required属性在业务中也会频繁用到，我看更新日志有频繁优化其他功能，但唯独这个问题一直没有解决，希望开发人员能把这个issue的优先级提高。

鄙人在这里写下简单的解决方法，以便不懂的朋友可以参照修改一下，：

1、找到“/tdesign-miniprogram/input”文件夹下的input.wxml、input.wxss、prop.js文件；

2、在input.wxml中，在如图所示位置增加：

 <block wx:if="{{required}}">
    <text decode class="{{classPrefix}}--required">&nbsp;*</text>
  </block>

3、在input.wxss中，增加样式：

  .t-input--required {
    font-size: var(--td-input-required-font-size, var(--td-font-size-m, 32rpx));
    color: var(--td-input-required-color, var(--td-error-color-6, #d54941));
  }

4、在prop.js中，增加一个属性定义：

 required: {
     type: Boolean,
     value: false,
 }

完成后刷新页面就可以了。

[anlyyao]

解释一下优先级问题：input 组件的"表单必填星号"在业务测是有解决方案的（官网示例），并非强依赖组件本身支持，优先级确实不高。而且，必填星号，我们推荐放在cell中处理。实现上，如果 input 必须实现 required 属性，推荐使用伪元素。

结论：input本身暂不支持required属性，后续有form表单计划，会在form中统一处理。当前方案如下：1. input label 插槽；2. cell + input。 代码片段：https://developers.weixin.qq.com/s/0fzynomV7HYs