原生html

需求：

帶td tr 的table，submit按鈕，
首先實現左側hover按鈕，其次實現樣式優化

想法 & 踩坑

1. 抄element-ui的 css就行 ，但是不用全抄，input的移過來差不多了
   注意往下找到原生實現部分 ，（見下面）
2. 發現表格無法居中，還有因為提示是用的display none，住表格裡會瘋狂抖動
   解決：提示框用absolute定位，就不會影響到表格了（注意和表格寬高一樣就行）（感謝josie）
   最後給表格 table設定上： style="width: 80%;margin:auto" 就可以居中了
3. 因為只有一個檔案…… 帶圈的i按鈕， 用css的icon實現
   這裡最後參考的是zhangxinxu：
   介紹：
   https://www.zhangxinxu.com/wordpress/2019/08/pure-css-icon/
   實現：https://www.zhangxinxu.com/sp/icon/css.php （先複製主類，再複製單個的）
   這個是簡單一點的： https://blog.csdn.net/weixin_34327761/article/details/91366793 （但是它是斜體 就不行）

實現

input type=submit實際上和button差不多，改css是：input[type=submit]:hover
css 新增類似element-ui樣式

            input {
                -webkit-appearance: none;
                background-color: #fff;
                background-image: none;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                box-sizing: border-box;
                color: #606266;
                display: inline-block;
                font-size: inherit;
                height: 30px;
                line-height: 30px;
                outline: 0;
                padding: 0 15px;
                transition: border-color 0.2s
                    cubic-bezier(0.645, 0.045, 0.355, 1);
            }
 

新增hover效果，點選後30s可撤銷（這裡有個很好玩的鋼琴效果emmmm）
這裡參考了 https://blog.csdn.net/weixin_45764383/article/details/104499712
按說可以事件委託，但是emmmm ……

            (function () {
                let len = document.getElementsByClassName("info").length;
                let timer=new Array(len);
                for (let i = 0; i < len; i++) {
                    let btn = document.getElementsByClassName("info")[i];
                    let box = document.getElementsByClassName("tip")[i];
                    box.onmouseover = btn.onmouseover = function () {
                        if(timer[i]) clearTimeout(timer[i])
                        box.style.display = "inline-block";
                    };
                    box.onmouseout = btn.onmouseout = function () {
                        timer[i] = setTimeout(function(){
                            box.style.display = 'none';
                        },500);
                    };
                }
            })();
 

overflow問題：

場景：

父元素area 下el-tabs，el-tab單頁有的需要展示滾動條，有的不需要（因為是內嵌頁面，內嵌裡有自己的滾動條）
1、本來是給area都設定滾動條，先取消了area給el-tabs的滾動條
2、此時發現， 無論怎麼給從裡往外的元素加overflow scroll都無效，或者加了定位，也無效

原因：

仔細點F12小手，看區域
此時可以看到，area只有那麼一小塊，是el-tabs的內容超出了，設定滾動條的元素越級了
換句話說，el-tab在el-tabs的容器內沒有overflow（超出）
el-tabs在area的容器裡超出了，但是area已經設定了沒有滾動條，所以後面的設定就無效了

解決：

1、給el-tabs新增樣式：
height:100%;overflow-y:scroll 讓tab溢位在tabs裡，由此可控（生效）
2、因為需求是 要麼有要麼沒有 用動態繫結
:style='activeName=="xxxxx?"height:100%;overflow-y:scroll;":""'