新聞中心
如下圖這樣把操作按鈕放在select
彈層底部是一種挺常見(jiàn)的設(shè)計(jì)方式
創(chuàng)新互聯(lián)建站一直在為企業(yè)提供服務(wù),多年的磨煉,使我們?cè)趧?chuàng)意設(shè)計(jì),成都營(yíng)銷網(wǎng)站建設(shè)到技術(shù)研發(fā)擁有了開發(fā)經(jīng)驗(yàn)。我們擅長(zhǎng)傾聽企業(yè)需求,挖掘用戶對(duì)產(chǎn)品需求服務(wù)價(jià)值,為企業(yè)制作有用的創(chuàng)意設(shè)計(jì)體驗(yàn)。核心團(tuán)隊(duì)擁有超過(guò)10余年以上行業(yè)經(jīng)驗(yàn),涵蓋創(chuàng)意,策化,開發(fā)等專業(yè)領(lǐng)域,公司涉及領(lǐng)域有基礎(chǔ)互聯(lián)網(wǎng)服務(wù)中國(guó)電信云錦天府、成都app軟件開發(fā)公司、手機(jī)移動(dòng)建站、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)絡(luò)整合營(yíng)銷。
但是很遺憾element-ui
沒(méi)有給我們提供這個(gè)插槽,我們想實(shí)現(xiàn)這個(gè)功能只能重寫組件或者等官方更新嗎,答案當(dāng)然是否定的!
花了一點(diǎn)時(shí)間通過(guò)一個(gè)函數(shù)實(shí)現(xiàn)這個(gè)功能,支持el-select
和el-cascader
,效果點(diǎn)擊預(yù)覽
其實(shí)邏輯很簡(jiǎn)單,把下面這段html
插入到指定位置就行了
我這里直接使用el-cascader
的樣式,實(shí)際使用中這段html
可以根據(jù)自己的需求修改
上代碼,在methods
寫入這段函數(shù)
/** * 為element-ui的Select和Cascader添加彈層底部操作按鈕 * @param visible * @param refName 設(shè)定的ref名稱 * @param onClick 底部操作按鈕點(diǎn)擊監(jiān)聽 */ visibleChange(visible, refName, onClick) { if (visible) { const ref = this.$refs[refName]; let popper = ref.$refs.popper; if (popper.$el) popper = popper.$el; if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) { const el = document.createElement('ul'); el.className = 'el-cascader-menu__list'; el.style = 'border-top: solid 1px #E4E7ED; padding:0; color: #606266;'; el.innerHTML = `
el-select
跟el-cascader
的調(diào)用方式一致,這里以el-cascader
舉例
visibleChange(v, 'cascader', cascaderClick)" ref="cascader" />
如果調(diào)用的地方比較多,也可以像我一樣封裝成mixins
const selectBottomAction = { methods: { /** * 為element-ui的Select和Cascader添加彈層底部操作按鈕 * @visible-change="v => selectBottomAction(v, {ref: 'select', label: '商品分類' , icon: 'el-icon-menu', click: goodsTypeManagement})" * @param visible * @param ref 設(shè)定的ref名稱 * @param click 底部操作按鈕點(diǎn)擊監(jiān)聽 * @param label 標(biāo)題 * @param icon 圖標(biāo)class * @param arrow 是否顯示箭頭 */ selectBottomAction(visible, {ref, click, label = '', icon = '', arrow = false}) { if (visible) { const _ref = this.$refs[ref]; let popper = _ref.$refs.popper; if (popper.$el) popper = popper.$el; if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) { const el = document.createElement('ul'); el.className = 'el-cascader-menu__list'; el.style = 'border-top: solid 1px #E4E7ED; padding: 0; color: #606266;'; el.innerHTML = `
提示:后期可能會(huì)隨著官方版本升級(jí)失效,謹(jǐn)慎使用
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章題目:詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
當(dāng)前鏈接:http://www.ef60e0e.cn/article/pgodjg.html