快捷導(dǎo)航

element-plus 如何設(shè)置 el-date-picker 彈出框位置

更新時(shí)間：2024年07月02日 11:23:26 作者：清新小伙子

el-date-picker 組件會(huì)自動(dòng)根據(jù)空間范圍進(jìn)行選擇比較好的彈出位置,但特定情況下,它自動(dòng)計(jì)算出的彈出位置并不符合我們的實(shí)際需求,故需要我們手動(dòng)設(shè)置,這篇文章主要介紹了element-plus 如何設(shè)置 el-date-picker 彈出框位置,需要的朋友可以參考下

前言

概述：el-date-picker 組件會(huì)自動(dòng)根據(jù)空間范圍進(jìn)行選擇比較好的彈出位置，但特定情況下，它自動(dòng)計(jì)算出的彈出位置并不符合我們的實(shí)際需求，故需要我們手動(dòng)設(shè)置。

存在的問(wèn)題：element-plus 中 el-date-picker 文檔中并沒(méi)有提供明確的屬性供我們?cè)O(shè)置彈出位置。

解決方案：我們可以看到文檔提供了 popper-options 屬性供我們?nèi)ザㄖ?。詳情設(shè)置可閱讀 popper.js。

實(shí)際場(chǎng)景案例

原始狀態(tài)，向左側(cè)彈出

實(shí)際需求：下方彈出

代碼設(shè)置
核心配置——popper-options

:popper-options="{
   modifiers: [
        {
            name: 'flip',
            options: {
                fallbackPlacements: ['bottom'],
                allowedAutoPlacements: ['bottom'],
            }
        }
    ]
}"

完整代碼：

<el-date-picker
  v-model="timeRange"
  type="datetimerange"
  format="YYYY-MM-DD HH:mm:ss"
  value-format="x"
  :clearable="false"
  prefixIcon=""
  :popper-options="{
      modifiers: [
          {
              name: 'flip',
              options: {
                  fallbackPlacements: ['bottom'],
                  allowedAutoPlacements: ['bottom'],
              }
          }
      ]
  }"
/>

最終效果

到此這篇關(guān)于element-plus 設(shè)置 el-date-picker 彈出框位置的文章就介紹到這了,更多相關(guān)element-plus el-date-picker 彈出框位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

淺談Vant-list?上拉加載及下拉刷新的問(wèn)題
這篇文章主要介紹了淺談Vant-list?上拉加載及下拉刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue如何使用patch-package優(yōu)雅地修改第三方依賴(lài)庫(kù)
在前端開(kāi)發(fā)中,有時(shí)我們需要對(duì)第三方依賴(lài)庫(kù)進(jìn)行修改以滿(mǎn)足項(xiàng)目需求,patch-package 是一個(gè)優(yōu)秀的工具,可以幫助我們優(yōu)雅地管理這些修改,下面我們來(lái)看看具體操作吧
2025-03-03
vue.js的狀態(tài)管理vuex中store的使用詳解
今天小編就為大家分享一篇vue.js的狀態(tài)管理vuex中store的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue監(jiān)測(cè)一個(gè)div寬度變化的幾種方法匯總
這篇文章主要介紹了在Vue中監(jiān)測(cè)div寬度變化的四種方法：使用ResizeObserver、結(jié)合Vue的watch、使用window resize事件和引入第三方庫(kù),每種方法都有其適用場(chǎng)景和注意事項(xiàng),推薦首選ResizeObserver,因?yàn)樗阅芨咔掖a簡(jiǎn)潔,需要的朋友可以參考下
2026-03-03
vue + el-form 實(shí)現(xiàn)的多層循環(huán)表單驗(yàn)證
這篇文章主要介紹了vue + el-form 實(shí)現(xiàn)的多層循環(huán)表單驗(yàn)證，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下。
2020-11-11
解析Vue.use()是干什么的
今天通過(guò)本文給大家分享Vue.use是什么，主要包括vueEsign?插件的install是什么，element-ui的install是什么，為什么有的庫(kù)就不需要使用Vue.use，對(duì)vue.use()相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-06-06
Vue的watch和computed方法的使用及區(qū)別介紹
Vue的watch屬性可以用來(lái)監(jiān)聽(tīng)data屬性中數(shù)據(jù)的變化。這篇文章主要介紹了Vue的watch和computed方法的使用及區(qū)別,需要的朋友可以參考下
2018-09-09
Vue2.0系列之過(guò)濾器的使用
這篇文章主要介紹了Vue2.0系列之過(guò)濾器的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue+electron 自動(dòng)更新的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+electron 自動(dòng)更新的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-02-02
vue項(xiàng)目使用element?ui詳解
文章介紹了如何在Vue項(xiàng)目中使用Element?Plus?UI框架,包括創(chuàng)建項(xiàng)目、安裝Element?Plus、在項(xiàng)目中引入和使用Element組件以及如何修改樣式屬性
2025-12-12