鍍金池/ 問答/HTML/ 組件如何復(fù)用？

組件如何復(fù)用？

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

回答
編輯回答
老梗

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

2017年10月17日 12:05
編輯回答
心沉

將checkbox與按鈕綁定，每個(gè)按鈕對(duì)象保存多個(gè)checkbox數(shù)據(jù)，彈窗只作為一個(gè)載體，顯示時(shí)將相應(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
編輯回答
生性

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

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

假設(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() {
        // 獲取本地?cái)?shù)據(jù)，每次打開彈窗要跑一遍
        const ids = window.localStorage.getItem('ids')
        if(ids){
            // 這里有個(gè)坑，數(shù)據(jù)響應(yīng)問題，要注意`this.ids`里頭要先有那些1、2、3屬性
            this.ids = JSON.parse(ids) 
        }
    }
}

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

window.localStorage.removeItem('ids')

為什么this.ids要先有屬性：vue的對(duì)象更改檢測(cè)注意事項(xiàng)

2018年2月3日 01:14
編輯回答
糖果果

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

2017年5月13日 12:01