組件如何復(fù)用？

需求是這樣子，10個按鈕，每個按鈕有各自的ID，點擊按鈕同時只出現(xiàn)一個彈窗，所有按鈕共用這個彈窗。
打開彈窗的時候由點擊按鈕的ID調(diào)接口查詢彈窗內(nèi)容，彈窗內(nèi)容都是多個checkbox，現(xiàn)在要在勾選checkbox的時候，各自按鈕ID對應(yīng)的彈窗互不干擾，且同一個ID對應(yīng)的彈窗能重復(fù)打開修改里面的勾選狀況并保存上次的修改狀況。
然后頁面最下角有一個提交按鈕，用來保存所有勾選的checkbox集。
想不到什么好的做法，求大神們給點意見。

回答

編輯回答

老梗

iView的modal和Button組件夠你使用了。

2017年10月17日 12:05

編輯回答

心沉

將checkbox與按鈕綁定，每個按鈕對象保存多個checkbox數(shù)據(jù)，彈窗只作為一個載體，顯示時將相應(yīng)按鈕的數(shù)據(jù)傳入就行。

let buttons = [{
    id: 0,
    data: [{checked: true},{checked: false}]
}, {
    id: 1,
    data: null
}, ...]

function onButtonClick(button) {
    this.modalShow = true
    this.modalData = button.data
    if (!button.data) {
        getData().then(data => {
            this.modalData = button.data = data
        })
    }
}

2018年9月1日 07:28

編輯回答

生性

這個彈窗是個組件，按鈕上的id只是傳值給這個組件而已，如果你按鈕ID值是固定的，那就好辦：

關(guān)鍵是對象存取操作：

假設(shè)id有1、2、3 ，每次你checkbox改變數(shù)據(jù)記得localStorage.setItem存一下就行了，新開彈窗就重新localStorage.getItem取覆蓋data()

data() { 
    return {
        ids: {
            1: {...}, //喜歡在里面存什么都行
            2: {...},
            3: {...},
        }
    }
}
methods() {
    checkboxSetItem() {
        // 用localStorage 存起來，為啥存起來？防止彈窗組件銷毀吧
        window.localStorage.setItem('ids',JSON.stringify(this.ids))
    },
   getItem() {
        // 獲取本地數(shù)據(jù)，每次打開彈窗要跑一遍
        const ids = window.localStorage.getItem('ids')
        if(ids){
            // 這里有個坑，數(shù)據(jù)響應(yīng)問題，要注意`this.ids`里頭要先有那些1、2、3屬性
            this.ids = JSON.parse(ids) 
        }
    }
}

//提交數(shù)據(jù)啥的成功后還記得銷毀

window.localStorage.removeItem('ids')

為什么this.ids要先有屬性：vue的對象更改檢測注意事項

2018年2月3日 01:14

編輯回答

糖果果

這樣吧，做一個數(shù)據(jù)緩存，那么數(shù)據(jù)怎么緩存？
1、讓其與對應(yīng)的Button相關(guān)聯(lián)，將數(shù)據(jù)掛載到Button元素上，然后通過元素獲取到對應(yīng)的值。
http://nuysoft.iteye.com/blog...
歡迎：具體做法

2017年5月13日 12:01