1. 適用場景

單行文本可用于錄入數(shù)字，比如身份證號、手機(jī)號、學(xué)號、員工編號、銀行卡號、會員號等；也可只輸入普通的文字。

https://www.yuque.com/yida/support/snftao

2. 基礎(chǔ)功能

擁有掃碼、格式校驗(yàn)、計(jì)數(shù)器、一鍵清除、高級功能頁面跳轉(zhuǎn)等功能。

2.1 掃碼功能

2.1.1 掃碼模式

我們可以調(diào)用釘釘?shù)膾叽a功能，快速將二維碼/條形碼的消息錄入給單行文本組件。

常用于設(shè)備巡查、資產(chǎn)盤點(diǎn)等需要掃碼輸入的場景。

掃碼模式

效果如圖：

注：該模式僅在釘釘手機(jī)端內(nèi)支持，開啟后，如果在不支持的環(huán)境下，點(diǎn)擊掃碼會出現(xiàn)提示需要在釘釘端內(nèi)打開，不會影響到組件的基礎(chǔ)使用。

2.1.2 掃碼類型

掃碼類型支持： 全部 、 僅二維碼 、 僅條形碼

全部：一個控件既可以識別 二維碼 又可以識別 條形碼

支持從相冊選擇圖片進(jìn)行識別

2.1.3 允許修改掃碼結(jié)果

掃碼識別到的信息支持修改，如果開啟了不允許修改掃碼結(jié)果的按鈕，則無法對掃碼后的結(jié)果進(jìn)行修改

如圖設(shè)置：

2.2 格式校驗(yàn)

支持設(shè)置文本格式：身份證、手機(jī)號碼、郵箱、網(wǎng)址、以及密碼。

1）手機(jī)號：可錄入 11 位數(shù)的手機(jī)號碼，格式會驗(yàn)證 1 開頭的 11 位數(shù)字。

2）身份證：當(dāng)需要收集身份證號碼時，可設(shè)置控件為身份證格式。

身份證校驗(yàn)規(guī)則：

①長度為 18，前 17 位為自然數(shù)字。

②最后一位可以是數(shù)字、也可以是字母X，如最后一位是除 X 之外的其他字母，則不符合身份證校驗(yàn)。

3）郵箱：當(dāng)需要收集郵箱信息時，可以開啟郵箱格式，參考格式：xxx@xxx.com

4）密碼：開啟密碼格式后，填寫頁面展示會是保密狀態(tài)。

5）網(wǎng)址：當(dāng)需要錄入網(wǎng)址時，可開啟網(wǎng)址格式，系統(tǒng)會進(jìn)行校驗(yàn)網(wǎng)址。

組件格式

2.3 計(jì)數(shù)器

開啟計(jì)數(shù)器后，可設(shè)置該組件的字?jǐn)?shù)上限，超出設(shè)置的字?jǐn)?shù)上限后，會進(jìn)行校驗(yàn)提示。

效果如圖：

2.4 一鍵清除

勾選顯示清除按鈕后，在訪問/預(yù)覽頁面如輸入內(nèi)容有誤，可直接使用清除按鈕一鍵清除。

效果如圖：

3. 高級用法

通過掃描二維碼/條形碼所獲取到的信息，可以拼接鏈接，然后進(jìn)行頁面跳轉(zhuǎn)

例如：掃碼查看商品詳情，掃碼訂餐這種場景等可適用

效果如圖：

3.1 配置

路徑：單行文本 >> 高級 >> 新建動作配置一個固定地址鏈接

舉例：新建動作寫 js 時，我們可以配置一個固定的地址鏈接，當(dāng)掃碼成功后，頁面獲取到的信息可作為鏈接參數(shù)，跳轉(zhuǎn)到事先設(shè)置好的固定地址鏈接里去查看詳情，實(shí)現(xiàn)掃碼成功后自動跳轉(zhuǎn)頁面的功能。

參考設(shè)置圖片如下：

注：代碼中的紅框位置要改成和右側(cè)唯一標(biāo)識一致的信息

唯一標(biāo)識：類似每個控件的身份證 每個控件的唯一標(biāo)識是不一樣的

可粘貼參考使用的 js 代碼信息：

export function onScanCodeSuccess(text) {
  const fieldId = 'editorField_klbopk6r';
  // 如果不是 http 或者 https 開頭的話，不顯示下方文本。
  if (!/^http(s)/.test(text)) {
    this.$(fieldId).setValue(null);
    return text;
  }
  const html = `<div><span style="color: #0089ff;"><a style="color: #0089ff;" href="${text}" target="_blank">點(diǎn)擊查看溯源單</a></span></div>`;
  // 賦值
  this.$(fieldId).setValue(html);
  // 注意，onScanCodeSuccess 事件要 return text 回去，不然回填會有問題
  return text;
}

3.2 怎么修改單行文本組件的樣式大小

請 點(diǎn)此 查看詳細(xì)操作說明。