记第二次手写仿element select组件的样式记第二次手写仿element select组件样式的经历，主要目的在

代码结构

源码(仅作记录，不做功能上的截图分享)

<!--select.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element select style</title>
    <link rel="stylesheet" href="../css/select.css" type="text/css">
    <!--引入项目所在的阿里字体CSS文件-->
    <link rel="stylesheet"  href="https://at.alicdn.com/t/font_2405460_rrlnzuc0m8.css">
</head>
<body>
    <div class="input-container" onclick="handleClicked()">
        <input id="input" class="input" type="text" placeholder="请选择" readonly>
        <i id="icon" class="iconfont icon-shanglajiantou select-icon"></i>
    </div>
    <ul id="select-content" class="select-content">
        <li class="select-item" onmousemove="onOver(event)" onclick="handleItemClick(event)">黄金糕</li>
        <li class="select-item" onmousemove="onOver(event)" onclick="handleItemClick(event)">双皮奶</li>
        <li class="select-item" onmousemove="onOver(event)" onclick="handleItemClick(event)">蚵仔煎</li>
        <li class="select-item" onmousemove="onOver(event)" onclick="handleItemClick(event)">龙须面</li>
        <li class="select-item" onmousemove="onOver(event)" onclick="handleItemClick(event)">北京烤鸭</li>
    </ul>
    <script src="../js/help.js"></script>
    <script src="../js/select.js"></script>
</body>
</html>

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

.input-container {
    margin: 20px 0 0 20px;
    position: relative;
    cursor: pointer;
}

.input {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 240px;
    cursor: pointer;
}

.input:focus {
    border: 1px solid #409eff;
}

/* 旋转加平滑过渡实现动画效果 */
.rotate-down {
    transform: rotate(0deg);
    transition: all 0.2s ease 0s;
}

.select-icon {
    position: absolute;
    left: 210px;
    top: 12px;
}

.rotate-up {
    transform: rotate(-180deg);
    transition: all 0.2s ease 0s;
}

.select-content {
    margin: 8px 0 0 20px;
    width: 240px;
    display: none;
    padding: 9px 0;
    background: #fff;
    border: 1px solid #dcdce0;
}

/* 伪元素实现三角 */
.select-content:before {
    position: absolute;
    content: '';
    left: 50px;
    top: 62px;
    height:0px; 
    width:0px;
    border-bottom: 8px solid #dcdce0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
}

.select-content:after {
    position: absolute;
    content: '';
    left: 51px;
    top: 64px;
    height:0px; 
    width:0px;
    z-index: 9999;
    border-bottom: 7px solid #fff;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
}

.select-item {
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  font-size:14px;
  cursor: pointer;
}

//help.js
//获取id为id的dom元素
function _getElementById(id) {
  return document.getElementById(id)
}

//获取标签名为tagName的dom元素
function _getElementsByTagName(tagName) {
  return document.getElementsByTagName(tagName)
}

//select.js
var up = false
var body = document.documentElement

function goDown() {
  _getElementById('icon').className =
    'iconfont  icon-shanglajiantou select-icon rotate-down'
  _getElementById('select-content').style.display = 'none'
}

function handleClicked() {
  up = !up
  if (up) {
    _getElementById('icon').className =
      'iconfont icon-shanglajiantou  select-icon rotate-up'
    _getElementById('select-content').style.display = 'block'
  } else {
    this.goDown()
  }
}

function onOver(event) {
  const listArr = _getElementsByTagName('li')
  for (let i = 0; i < listArr.length; i++) {
    listArr[i].style.backgroundColor = '#fff'
  }
  event.target.style.backgroundColor = '#f5f7fa'
}

function handleItemClick(event) {
  //点击小li需要对up进行取反
  up = !up
  const listArr = _getElementsByTagName('li')
  //   1. 直接用伪数组形式
  for (let i = 0; i < listArr.length; i++) {
    listArr[i].style.color = '#000000'
    listArr[i].style.fontWeight = 400
  }
  //   2. 使用Array.from组装成数组的形式
  //   const documentArr = Array.from(listArr)
  //   documentArr.forEach((item) => {
  //     item.style.color = '#000000'
  //     item.style.fontWeight = 400
  //     item.style.backgroundColor = '#fff'
  //   })
  event.target.style.color = '#409eff'
  event.target.style.fontWeight = 700
  _getElementById('input').style.border = '1px solid #409eff'
  _getElementById('input').value = event.target.innerHTML
  this.goDown()
}

body.onclick = function (e) {
  // 通过e.tagrget.localName来判断当前点击对象是否为除ul以外的地方
  if (['html', 'body'].includes(e.target.localName)) {
    //隐藏ul需要对up进行取反
    up = !up
    goDown()
    _getElementById('input').style.border = '1px solid #dcdfe6'
  } else if (e.target.localName == 'input') {
    _getElementById('input').style.border = '1px solid #409eff'
  }
}