一、背景

測(cè)試機(jī)列表有很多條測(cè)試機(jī)的數(shù)據(jù)，要求能夠編輯任一一條數(shù)據(jù)的某個(gè)元素的值，例如列表里顯示了測(cè)試A的機(jī)型、編號(hào)、系統(tǒng)版本號(hào)，要求可以編輯系統(tǒng)版本號(hào)

二、方案選型

方案1、仿照支付寶

如下圖

但不知道怎么實(shí)現(xiàn)的，看樣子是微應(yīng)用，不是小程序，所以放棄啦

方案2 使用my.prompt

my.prompt 是彈出一個(gè)對(duì)話框，讓用戶在對(duì)話框內(nèi)輸入文本的 API。官方的介紹，感覺蠻合適的
my.canIUse(‘prompt’)，發(fā)現(xiàn)釘釘小程序并不支持這個(gè)api

方案3 使用modal對(duì)話框

https://opendocs.alipay.com/mini/component-ext/modal
官方文檔里面modal的使用感覺有點(diǎn)復(fù)雜，都進(jìn)行了封裝，對(duì)于在她封裝的基礎(chǔ)上修改比較困難，對(duì)此我自己整理了一下modal怎么使用
1、在頁(yè)面某處點(diǎn)擊觸發(fā)modalA（modalA狀態(tài)變?yōu)榱藅rue）

<list-item arrow="horizontal" index="tips" onClick="modalOpenedEdit" data-mobileNo="{{mobileNo}}" data-url="system/index" key="items-tips">
      <view class="row">
        <view class="row-title">系統(tǒng)版本號(hào)</view>
        <view class="row-extra">{{mobileDetail.sysInfo}}</view>
      </view>
    </list-item>

此中的onClick觸發(fā)了modal，彈出下面的div彈框

2、觸發(fā)的modal里面有段div（可自定義你需要的樣式）

<modal data-mobileNo="{{mobileNo}}" show="{{modalOpenedEdit}}" >
 <form onSubmit="onSubmit" onReset="onReset">
<view class="form-row-content">
          <input name="input" class="input" value="{{mobileDetail.sysInfo}}" />
        </view>
        <view class="buttons">
        <view class="page-section-btns">
        <view><button  style="float:left;margin-left:50px;background-color:#ffffff;border:none;color:#4b96f3" size="mini" onTap="cancel">取消</button></view>
        <view><button  style="float:right;margin-right:50px;background-color:#ffffff;border:none;color:#4b96f3 " size="mini" formType="submit">確定</button></view>
        </view>
      </form>
</modal>

div為一個(gè)輸入框，輸入框下有確定和取消按鈕

3、div中的某個(gè)按鈕被觸發(fā)，關(guān)閉modalA(modalA狀態(tài)變?yōu)榱薴alse)
例如cancel事件關(guān)閉了該彈框，則只需要些取消事件的js即可

cancel(){
    this.setData({
      modalOpenedEdit: false,
    });
  }