<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          antd—Select組件下拉選項的樣式問題(模態框類似)

          時間:?2019-08-27閱讀:?23標簽:?antd


          modal框的dom與<div id='root'>同級別,因此不能以user-manage為父元素定義樣式,以.modal定義樣式會污染其他模塊的模態框,(下拉框選項的級別也與root同級),即:

          // F12觀察組件展開dom結構
          <div id='app'>
              <div id='root'>
                  <seletion id='user-manage'>
                     頁面內容:搜索行列表等
                  </seletion>
              </div>
              <div id='modal'>
                  模態框內容
                  <div class='select'>下拉框</div>
              </div>
              
              <div class='select-dropdown'>
                  下拉框選項
              </div>
          </div>

          解決方案:使用getContainer和getPopupContainer分別將模態框和select-dropdown掛載到指定父元素下面

          // antd組件代碼如下
          <Modal getContainer={() => document.getElementById('user-manage')}>
          
          <Select getPopupContainer={() =>document.getElementById('rcDialogTitle0')}>
          // F12觀察組件展開dom結構
          <div id='app'>
              <div id='root'>
                  <seletion id='user-manage'>
                     頁面內容:搜索行列表等~~~~
                     <div id='modal'>
                         模態框內容
                         <div class='select'>下拉框</div>~~~~
                         <div class='select-dropdown'>
                             下拉框選項
                         </div>
                     </div>
                  </seletion>
              </div>
          </div>

          小知識點:select-dropdown樣式排版

          // dom結構:
          <xxx class='ant-select-dropdown-menu-item-group'>
              <div>噴涂檢測組</div>
              <ul>
                  <li>業務組管理</li>
                  <li>數據組管理員</li>
                  <li>模型管理員</li>
                  <li>普通人員</li>
              </ul>
          </xxx>
          <xxx class='ant-select-dropdown-menu-item-group'>
              <div>掛網填漿檢測組</div>
              <ul>
                  <li>業務組管理</li>
                  <li>數據組管理員</li>
                  <li>模型管理員</li>
                  <li>普通人員</li>
              </ul>
          </xxx>
          

          1.4個li如何一行2個:

          #user-manage #modal .select-dropdown ul li{  
            display: inline;  
            float: left;  
          }

          2.排除最后一個元素,不給下border樣式

          #user-manage #modal .select-dropdown .ant-select-dropdown-menu-item-group:not(:last-of-type){  
            border-bottom: 0.5px #CFD8DF solid;  
          }
          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/7804

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网