1. <ul id="0c1fb"></ul>

      <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
      <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

      RELATEED CONSULTING
      相關(guān)咨詢
      選擇下列產(chǎn)品馬上在線溝通
      服務(wù)時(shí)間:8:30-17:00
      你可能遇到了下面的問(wèn)題
      關(guān)閉右側(cè)工具欄

      新聞中心

      這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
      詳解為element-ui的Select和Cascader添加彈層底部操作按鈕

      如下圖這樣把操作按鈕放在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的Select和Cascader添加彈層底部操作按鈕

      但是很遺憾element-ui沒(méi)有給我們提供這個(gè)插槽,我們想實(shí)現(xiàn)這個(gè)功能只能重寫組件或者等官方更新嗎,答案當(dāng)然是否定的!

      花了一點(diǎn)時(shí)間通過(guò)一個(gè)函數(shù)實(shí)現(xiàn)這個(gè)功能,支持el-selectel-cascader,效果點(diǎn)擊預(yù)覽

      詳解為element-ui的Select和Cascader添加彈層底部操作按鈕

      詳解為element-ui的Select和Cascader添加彈層底部操作按鈕

      其實(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 = `
    2. 商品分類管理
    3. `; popper.appendChild(el); el.onclick = () => { // 底部按鈕的點(diǎn)擊事件 點(diǎn)擊后想觸發(fā)的邏輯也可以直接寫在這 onClick && onClick(); // 以下代碼實(shí)現(xiàn)點(diǎn)擊后彈層隱藏 不需要可以刪掉 if (ref.toggleDropDownVisible) { ref.toggleDropDownVisible(false); } else { ref.visible = false; } }; } } },

      el-selectel-cascader的調(diào)用方式一致,這里以el-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 = `
    4. ${icon ? `` : ''} ${label} ${arrow ? '' : ''}
    5. `; popper.appendChild(el); el.onclick = () => { click && click(); if (_ref.toggleDropDownVisible) { _ref.toggleDropDownVisible(false); } else { _ref.visible = false; } }; } } }, }, }; export default selectBottomAction;
      提示:后期可能會(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
      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区
          1. <ul id="0c1fb"></ul>

            <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
            <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

            井陉县| 墨江| 大方县| 凭祥市| 内江市| 武宁县| 营口市| 淄博市| 乃东县| 虞城县| 林州市| 定日县| 宁津县| 通道| 绥江县| 红桥区| 阜城县| 乐亭县| 那曲县| 泸水县| 阳城县| 雷波县| 兖州市| 宁武县| 四子王旗| 新兴县| 阳新县| 金昌市| 大关县| 遂平县| 泌阳县| 南皮县| 合作市| 射洪县| 高雄县| 噶尔县| 确山县| 友谊县| 大同市| 钟祥市| 钦州市|