修改源碼實現(xiàn)iview weapp小程序UI庫的modal組件自定義寬高
2021-07-26 12:34:34

小程序端UI庫iview weapp的modal模態(tài)窗自定義樣式修改

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

具體的修改方法如下:

組件修改

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

1. Component({

2. externalClasses: ['i-class', 'i-class-mask'],

3. ?

4. properties: {

5. ...

6. height: {

7. type: String,

8. value: ''

9. },

10. width: {

11. type: String,

12. value: ''

13. }

14. },

2.modal的index.wxml修改:

• i-modal-body、i-modal-main的標(biāo)簽增加style屬性設(shè)置

1. ...

2. <view class="i-modal-main" style="width:{{width}}px;">

3. ...

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

5. ...

頁面修改

1.data添加寬高屬性

1. export default {

2. data() {

3. return {

4. ...,

5. height: 150,

6. width: 310,

7. }

8. },

9. ...

10. }

2.頁面內(nèi)引用的modal組件標(biāo)簽上傳入屬性

1. <i-modal

2. title="新增銀行卡"

3. i-class="iot-modal"

4. :visible="visible"

5. :actions="actions"

6. @iclick="handleAddCard"

7. :height="height"

8. :width="width"

9. >

小程序頁面示例效果

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

?

?