迷你导航笔记--4 | Learning Notes

# 迷你导航笔记--4

# 实现删除

引入icon-close，通过css布局调整位置

const render = ()=>{
  $('.siteList').find('li:not(.last)').remove()
  hashMap.forEach(node =>{
    const $li = $(`<li>
        <a href="${node.url}">
          <div class="site">
            <div class="logo">${node.logo}</div>
            <div class="link">${simplifyUrl(node.url)}</div>
            <div class="close">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-close"></use>
              </svg>
            </div>
          </div>
        </a>
      </li>`).insertBefore($lastLi)
  })
}

.siteList .site{
  position: relative;
  cursor: pointer;
}
.siteList .site > .close{
  position: absolute;
  right:10px;
  top:5px;
  cursor: default;
}

使用js控制点击事件，代替 a 标签跳转功能, 使用 stopPropagation 阻止冒泡，点击之后重新调用render渲染

const render = ()=>{
  $('.siteList').find('li:not(.last)').remove()
  hashMap.forEach((node,index) =>{
    const $li = $(`<li>
      <div class="site">
        <div class="logo">${node.logo}</div>
        <div class="link">${simplifyUrl(node.url)}</div>
        <div class="close">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-close"></use>
          </svg>
        </div>
      </div>
    </li>`).insertBefore($lastLi)
    $li.on('click',()=>{
      window.open(node.url)
    })
    $li.on('click','.close',(e)=>{
      e.stopPropagation() //阻止冒泡
      hashMap.splice(index,1)
      render()
    })
  })
}

# PC端搜索框布局

使用媒体查询

@media (min-width:500px){
  .searchForm{
    max-width: 400px;
    margin-left:auto;
    margin-right:auto;
  }
}

# siteList布局

使用 -margin 代替 space-between

.globalMain{
  max-width:900px;
  margin-left:auto;
  margin-right: auto;
}
@media(min-width:500px){
  .globalHeader{
    margin:100px 0 60px;
  }
  .siteList{
    margin-left:0;
    margin-right: -25px;
    justify-content: flex-start;
  }
  .siteList > li {
    margin-right: 25px;
  }
}

# 悬浮出现关闭按钮

默认none，悬浮时变为 block

.siteList .site > .close {
  cursor: default;
}
.siteList .site:hover > .close {
  display: block;
}

# 键盘事件

$(document).on('keypress',(e)=>{
  const {key} = e
  for(let i = 0; i < hashMap.length; i++){
    if(hashMap[i].logo.toLowerCase() === key){
      window.open(hashMap[i].url)    
    }  
   }
})

# parcel报错

Error in parsing SVG: Unbound namespace prefix: "xlink"
// 解决措施： 添加 --no-minify
parcel build src/index.html --no-minify

# 目录路径

parcel build src/index.html --no-minify --public-url ./

yarn init --yes/-y 跳过交互式会话，生成 package.json

← 迷你导航笔记--3