修改源碼實現小程式UI庫iview weapp的modal組件自定義寬高

• 2019 年 12 月 25 日
• 筆記

記一下小程式端UI庫iview weapp的modal模態窗自定義樣式修改

因為項目需要在模態窗中顯示內容，小程式端的iview沒有類似popup這種的彈出框，所以就選擇了modal對話框來承載彈出內容。一番引入使用後發現，當模態框中的內容多了之後會導致內容區出現滾動，因為模態框的高度是固定的所以就需要上下滾動查看了，一是不方便操作然後又感覺比較丑。就想通過控制對話框內容區的寬高樣式來適應彈出內容。

修改方法如下:

# 組件修改

組件程式碼: 1.modal的index.js 添加寬高屬性

Component({      externalClasses: ['i-class', 'i-class-mask'],        properties: {          ...          height: {              type: String,              value: ''          },          width: {              type: String,              value: ''          }      },

2.modal的index.wxml修改:

• i-modal-body、i-modal-main的標籤增加style屬性設置

...  <view class="i-modal-main" style="width:{{width}}px;">  ...  <view class="i-modal-body" style="height:{{height}}px;max-height:{{height}}px"><slot></slot></view>  ...

# 頁面修改

1.data添加寬高屬性

export default {    data() {      return {        ...,        height: 150,        width: 310,      }    },    ...  }

2.頁面內引用的modal組件標籤上傳入屬性

<i-modal      title="新增銀行卡"      i-class="iot-modal"      :visible="visible"      :actions="actions"      @iclick="handleAddCard"      :height="height"      :width="width"    >

# 小程式頁面示例效果

以上只是簡單的改造，歡迎留言更好的方法