完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問題
在使用iview的過程中，我遇到這樣一個(gè)問題，在Model中使用select下拉框組件。但是當(dāng)彈出框超過一屏需要滾動(dòng)時(shí)，select的下拉選項(xiàng)會(huì)出現(xiàn)錯(cuò)位（下圖1為正常，圖2為滾動(dòng)后，下拉選項(xiàng)錯(cuò)位。）
圖1：
圖2：
在分析組件代碼后，發(fā)現(xiàn)以下一個(gè)樣式：
.ivu-modal .ivu-select-dropdown {
position: absolute !important;
}
解決方案
正是這個(gè)樣式影響了下拉框的定位，解決的方式是覆蓋作者的原來樣式。
但是，很不巧的是，作者加了一個(gè) !important ,改變了優(yōu)先級(jí)。
那么，如何讓自己的樣式優(yōu)先級(jí)比他高呢，可以在自定義的樣式文件里加入這樣的樣式：
body .ivu-modal .ivu-select-dropdown{
position: fixed !important;
}
這樣就解決了上述提到的問題。關(guān)于為什么加個(gè)body，就能改變樣式的優(yōu)先級(jí)，可以參照我的博客相關(guān)文章（how2js.cn）
以上這篇完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
element?ui中的table表格數(shù)據(jù)是動(dòng)態(tài)生成的,最近遇到個(gè)需求,要求我們對(duì)單元格進(jìn)行合并,所以下面這篇文章主要給大家介紹了關(guān)于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下2022-08-08
vite2.0+vue3移動(dòng)端項(xiàng)目實(shí)戰(zhàn)詳解
這篇文章主要介紹了vite2.0+vue3移動(dòng)端項(xiàng)目實(shí)戰(zhàn)詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue請(qǐng)求服務(wù)器數(shù)據(jù)后綁定不上的解決方法
今天小編就為大家分享一篇vue請(qǐng)求服務(wù)器數(shù)據(jù)后綁定不上的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
關(guān)于vue-tree-chart簡(jiǎn)單的使用
這篇文章主要介紹了關(guān)于vue-tree-chart簡(jiǎn)單的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼實(shí)例代碼
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
在Vue里渲染一塊內(nèi)容，會(huì)有四個(gè)流程步驟，那么該怎么理解這個(gè)流程呢，所以本文就給大家詳細(xì)講解一下Vue 渲染流程，文中有纖細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-07-07
vue綁定數(shù)字類型 value為數(shù)字的實(shí)例
這篇文章主要介紹了vue綁定數(shù)字類型 value為數(shù)字的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項(xiàng)目中我們可以通過行內(nèi)樣式進(jìn)行動(dòng)態(tài)修改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用定義好的變量設(shè)置css樣式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
基于Vue3+TypeScript的全局對(duì)象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對(duì)象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對(duì)象的注入和使用，需要的朋友可以參考下2022-09-09