Vue造轮子-popover组件(下)

• overflow:hidden -> body.appendChild
• 关闭重复 -> 分开,document只管外面,popover只管里面
• 忘了取消监听document -> 收拢close

  .content-wrapper { // 如果写了scoped,popover里面那么就只作用于popover里面,移到外面就在外面了就可以
    position: absolute;
    border: 1px solid  $border-color;
    border-radius: $border-radius;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
    
    
    background: white;
    transform: translateY(-100%);
    margin-top: -10px;
    padding: .5em 1em;
    max-width: 20em;
    word-break: break-all;
    &::before ,  &::after{
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      border: 10px solid transparent;
      left: 10px;
    }
    &::after{
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      border: 10px solid transparent;
      left: 10px;
    }
    &::before {
      border-top-color: black;
      top: 100%;
    }
    &::after {
      border-top-color: white;
      top: calc(100% - 1px);
    }
  }

  // 先要给contentWrapper加一个类,传递进入位置信息
  
    

  // 获得位置信息     
  props: {
      position:{
 type: String,
 default: 'top',
 validator(value){
   return ['top','bottom','left','right'].indexOf(value) >= 0
 }
      }
    },
  }

  // 在method里面写方法,主要控制大概位置
  method: {
    positionContent() {
 const {contentWrapper, triggerWrapper} = this['$refs']
 document.body.appendChild(contentWrapper)
 let {width, height, top, left} = triggerWrapper.getBoundingClientRect()
 if(this.position === 'top'){
   contentWrapper.style.left = left + window.scrollX + "px"
   contentWrapper.style.top = top + window.scrollY + "px"
 }else if(this.position === 'bottom'){
   contentWrapper.style.left = left + window.scrollX + "px"
   contentWrapper.style.top = top + height + window.scrollY + "px"
 }else if(this.position === 'left'){
   contentWrapper.style.left = left + window.scrollX + "px"
   let {height: height2} = contentWrapper.getBoundingClientRect()
   contentWrapper.style.top = top  + window.scrollY + (height - height2)/2 + "px"
 }else if(this.position === 'right'){
   contentWrapper.style.left = left + window.scrollX + width + "px"
   let {height: height2} = contentWrapper.getBoundingClientRect()
   contentWrapper.style.top = top  + window.scrollY + (height - height2)/2 + "px"
 }
      },
  }

  // 然后对css进行处理,主要是箭头当想
  
  $border-color: #333;
  $border-radius: 4px;
  .popover {
    display: inline-block;
    vertical-align: top;
    position: relative;
  }
  .content-wrapper { // 如果写了scoped,popover里面那么就只作用于popover里面,移到外面就在外面了就可以
    position: absolute;
    border: 1px solid  $border-color;
    border-radius: $border-radius;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
    
    
    background: white;
    padding: .5em 1em;
    max-width: 20em;
    word-break: break-all;
    &::before ,  &::after{
      content: '';
      display: block;
      border: 10px solid transparent;
      width: 0;
      height: 0;
      position: absolute;
    }

    &.position-top {
      transform: translateY(-100%);
      margin-top: -10px;
      &::before, &::after{
 left: 10px;
      }
      &::before {
 border-top-color: black;
 top: 100%;
      }
      &::after {
 border-top-color: white;
 top: calc(100% - 1px);
      }
    }

    &.position-bottom {
      margin-top: 10px;
      &::before, &::after{
 left: 10px;
      }
      &::before {
 border-bottom-color: black;
 bottom: 100%;
      }
      &::after {
 border-bottom-color: white;
 bottom: calc(100% - 1px);
      }
    }

    &.position-left{
      transform: translateX(-100%);
      margin-left: -10px;
      &::before, &::after{
 transform: translateY(-50%);
 top: 50%;
      }
      &::before {
 border-left-color: black;
 left: 100%;
      }
      &::after {
 border-left-color: white;
 left: calc(100% - 1px)
      }
    }

    &.position-right{
      margin-left: 10px;
      &::before, &::after{
 transform: translateY(-50%);
 top: 50%;
      }
      &::before {
 border-right-color: black;
 right: 100%;
      }
      &::after {
 border-right-color: white;
 right: calc(100% - 1px)
      }
    }

  }