鍍金池/ 問答/HTML5  HTML/ vuejs彈層構(gòu)建思路？

vuejs彈層構(gòu)建思路？

clipboard.png

如圖，這種彈層點(diǎn)擊“全部”、“已成交”、“未成交”，向后臺(tái)傳送對應(yīng)參數(shù)（當(dāng)然還有其他參數(shù)一起），
主要問題在于如何獲取彈層頁里點(diǎn)擊數(shù)據(jù)然后和其他數(shù)據(jù)一起發(fā)給后臺(tái)。
查詢接口始終是一個(gè)接口，初始化的時(shí)候沒問題，彈層傳參就報(bào)跨域。

clipboard.png

還是說需要重新寫一個(gè)組件？那又該怎么傳值呢？新人求教w(?Д?)w

    <div id="dialog" v-if="isDialog">
        <div class="dialog_select">
            <p class="dialog_please">請選擇</p>
            <p class="dialog_button">
                <button class="dialog_all dialog_red" @click="allData2">全部</button>
                <button class="dialog_all" @click="payData">已成交</button>
                <button class="dialog_all" @click="willData">未成交</button>
            </p>
        </div>
    </div>

頁面時(shí)html頁面，只引入了vuejs，willData方法如下：（1,2,3分別為按鈕對應(yīng)的參數(shù)）

clipboard.png

回答
編輯回答
維他命

其實(shí)也不難，你如果只是做一個(gè)彈框組件，應(yīng)該是這樣，這個(gè)組件設(shè)計(jì)遮罩層和顯示板，顯示板內(nèi)容使用slot進(jìn)行外部注入，當(dāng)然如果是專用的，你可以直接寫入具體內(nèi)容。

涉及參數(shù)：彈框是否顯示作為v-model對外開放。除了這個(gè)如果是有關(guān)閉按鈕或者上面說點(diǎn)擊，則需要對法觸發(fā)click事件，如果需要在彈框關(guān)閉前關(guān)閉后做一些事，需要觸發(fā)before-close和after-close事件，如果涉及表單組件，是否需要彈框每次都是新的內(nèi)容則需要destory-on-close

至于最后如何做，都是需要什么就添加什么，組件不外乎就是和外部通信，組件只做該組件做的功能，不能糅合，后面也不好維護(hù)和擴(kuò)展。

跨域問題的話，開發(fā)階段使用webpack-dev-server進(jìn)行代理配置即可，線上就需要服務(wù)器配置允許跨域了。

2018年7月24日 15:43
編輯回答
不舍棄

彈層的實(shí)現(xiàn)有兩個(gè)辦法

  1. 將彈層的代碼寫到當(dāng)前頁面里，受當(dāng)前頁面控制，直接操作當(dāng)前頁面的變量。如果彈層是公用組件，可以用 slot 插入，比如下面這樣：
popop
  .form-group(slot="content")
    input#filter-all.hide(type="radio", v-model="filter")
    label(for="filter-all") 全部
    ....
  1. 如果彈層用函數(shù)之類的方式封裝，可以考慮事件傳遞
const popup = PopupManager.open(....);
popup.on('change', (key, value) => this[key] = value);

查詢接口報(bào)跨域錯(cuò)誤應(yīng)該和彈層無關(guān)，建議檢查其它代碼。

2017年9月8日 11:53
編輯回答
青檸

跨域和我們前端怎么設(shè)計(jì)沒有關(guān)系呢，主要看后臺(tái)給不給你跨域，讓后臺(tái)小哥哥給你跨域就好了。開發(fā)階段可以在配置文件里面設(shè)置代理，就可以避免跨域了，方法看這里?？缬蛘f白了就是一種安全的防范機(jī)制，這是屬于通信層的，不是表現(xiàn)層的。

2018年2月23日 21:32