JTBC 组件文档

单行文本框 jtbc-input

此组件属于 自定义内置元素​ ，这里只介绍自定义属性用法。

基础用法

最简单的文本标签：

<input is="jtbc-input" type="text">

当 width 设置为 100%：

当 width 设置为 180px：

当 width 设置为 180：

<input is="jtbc-input" type="text" width="100%">
<input is="jtbc-input" type="text" width="180px">
<input is="jtbc-input" type="text" width="100">

只读和禁用

文本框只读：

文本框禁用：

<input is="jtbc-input" type="text" status="readonly"" value="只读">
<input is="jtbc-input" type="text" value="只读" readonly>
<input is="jtbc-input" type="text" status="disabled"" value="禁用">
<input is="jtbc-input" type="text" value="禁用" disabled>

其他状态

多选框选中状态：

单选框选中状态：

<input is="jtbc-input" type="checkbox" selected="true"">
<input is="jtbc-input" type="radio" selected="true">

按钮文本输入框

基础用法

带按钮的文本输入框：

换个按钮颜色：

换个按钮文字颜色：

<jtbc-field-input-with-button text="获取验证码" placeholder="请输入手机号" text-countdown="秒" countdown="120"></jtbc-field-input-with-button>
<jtbc-field-input-with-button text="获取验证码" placeholder="请输入邮箱" style="--button-background: #2a80eb;"></jtbc-field-input-with-button>
<jtbc-field-input-with-button text="获取验证码" placeholder="请输入邮箱" style="--button-color: red;"></jtbc-field-input-with-button>

text: 按钮显示的文字

text-countdown: 倒计时时显示的文字

countdown: 倒计时，时长。一般取 60 或者 90，也可根据实际情况来定。

部分代码逻辑

这里需要监听组件的 buttonClicked 事件，以此向后端请求，发短信或邮件验证码。然后，根据后端返回的状态，判断是否开启倒计时。

开启倒计时，调用组件的 enableButton 方法即可

const jtbcFieldInputWithButton = document.querySelector('jtbc-field-input-with-button');
if (jtbcFieldInputWithButton != null)
{
   // 监听组件按钮点击事件
   jtbcFieldInputWithButton.addEventListener('buttonClicked', e => {
      // 判断用户输入的手机号或者邮箱格式是否正确，正确后请求后端，省略这部分逻辑...     
      jtbcFieldInputWithButton.enableButton(); // 根据后端返回判断是否开启倒计时，即调用 enableButton 方法
   })
}

其他属性

下拉框文本输入框

基础用法

带下拉框的文本输入框：

<jtbc-field-input-with-datalist data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="请选择"></jtbc-field-input-with-datalist>

data： 是一个 json 格式的字符串。例如：[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}] 。

其他属性

禁用（disabled）、宽度（width） 这两个用法和上面“单行文本框”用法相同。

图标文本输入框

基础用法

全部默认属性值：

图标放右侧：

换个图标：

换个图标颜色：

<jtbc-field-input-with-icon></jtbc-field-input-with-icon>
<jtbc-field-input-with-icon position="right" placeholder="图标放右侧"></jtbc-field-input-with-icon>
<jtbc-field-input-with-icon icon="avatar"></jtbc-field-input-with-icon>
<jtbc-field-input-with-icon icon="avatar" style="--icon-color: #2a80eb;"></jtbc-field-input-with-icon>

图标查询：J5 内置图标

其他属性

禁用（disabled）、宽度（width） 这两个用法和上面“单行文本框”用法相同。

选项文本输入框

基础用法

默认样式：

放到右侧：

combine 模式：

<jtbc-field-input-with-select data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="请输入选项值"></jtbc-field-input-with-select>
<jtbc-field-input-with-select position="right" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="图标放右侧"></jtbc-field-input-with-select>
<jtbc-field-input-with-select mode="combine" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]"></jtbc-field-input-with-select>

mode：属性有两个值 json（默认） | combine 。

区别是返回值的格式不同：

• json 返回的是 json 格式的字符串, {"select": "1", "value":"输入的值"}
• combine 返回的是“选项值” 和 "输入值" 的拼接字符串， "1输入的值"

其他属性

禁用（disabled）、宽度（width） 这两个用法和上面“单行文本框”用法相同。

文字说明文本框

基础用法

默认样式：

加上文字说明：

放到左侧：

combine 模式：

<jtbc-field-input-with-text></jtbc-field-input-with-text>
<jtbc-field-input-with-text text="元"></jtbc-field-input-with-text>
<jtbc-field-input-with-text position="left" text="元" placeholder="放左侧"></jtbc-field-input-with-text>
<jtbc-field-input-with-text mode="combine" text="元"></jtbc-field-input-with-text>

mode：属性有两个值 readonly （默认） | combine 。

区别是返回值的不同：

• readonly 返回值只返回输入的值
• combine 返回的是“说明文字” 和 "输入值" 的拼接字符串， "输入的值元"

其他属性

禁用（disabled）、宽度（width） 这两个用法和上面“单行文本框”用法相同。