單行文本

2022-02-24 10:59 更新

1. 適用場(chǎng)景

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

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

2. 基礎(chǔ)功能

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

2.1 掃碼功能

2.1.1 掃碼模式

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

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

掃碼模式

效果如圖:

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

2.1.2 掃碼類(lèi)型

掃碼類(lèi)型支持: 全部 、 僅二維碼 、 僅條形碼

全部:一個(gè)控件既可以識(shí)別 二維碼 又可以識(shí)別 條形碼

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

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

掃碼識(shí)別到的信息支持修改,如果開(kāi)啟了不允許修改掃碼結(jié)果的按鈕,則無(wú)法對(duì)掃碼后的結(jié)果進(jìn)行修改

如圖設(shè)置:

2.2 格式校驗(yàn)

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

1)手機(jī)號(hào):可錄入 11 位數(shù)的手機(jī)號(hào)碼,格式會(huì)驗(yàn)證 1 開(kāi)頭的 11 位數(shù)字。

2)身份證:當(dāng)需要收集身份證號(hào)碼時(shí),可設(shè)置控件為身份證格式。

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

①長(zhǎng)度為 18,前 17 位為自然數(shù)字。

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

3)郵箱:當(dāng)需要收集郵箱信息時(shí),可以開(kāi)啟郵箱格式,參考格式:xxx@xxx.com

4)密碼:開(kāi)啟密碼格式后,填寫(xiě)頁(yè)面展示會(huì)是保密狀態(tài)。

5)網(wǎng)址:當(dāng)需要錄入網(wǎng)址時(shí),可開(kāi)啟網(wǎng)址格式,系統(tǒng)會(huì)進(jìn)行校驗(yàn)網(wǎng)址。

組件格式

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

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

效果如圖:

2.4 一鍵清除

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

效果如圖:

3. 高級(jí)用法

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

例如:掃碼查看商品詳情,掃碼訂餐這種場(chǎng)景等可適用

效果如圖:

3.1 配置

路徑:?jiǎn)涡形谋?>> 高級(jí) >> 新建動(dòng)作配置一個(gè)固定地址鏈接

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

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

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

唯一標(biāo)識(shí):類(lèi)似每個(gè)控件的身份證 每個(gè)控件的唯一標(biāo)識(shí)是不一樣的

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

export function onScanCodeSuccess(text) {
  const fieldId = 'editorField_klbopk6r';
  // 如果不是 http 或者 https 開(kāi)頭的話(huà),不顯示下方文本。
  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 回去,不然回填會(huì)有問(wèn)題
  return text;
}

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

請(qǐng) 點(diǎn)此 查看詳細(xì)操作說(shuō)明。


以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)