1. 90前端首页
  2. 前端框架

Vue造轮子-popover组件(下)

 

1. 上一次的问题总结。

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

2. 可以把一个函数哟没有五行作为一个优化的标准,简称为五行定律

3. 接下来把样式改好点

  .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));
    /*通过drop-shadow解决小三角没有阴影的问题,但是兼容性不好 */
    /*box-shadow: 0 0 3px 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);
    }
  }

4. 增加功能:用户可以选择popover是上面下面左面右面

  // 先要给contentWrapper加一个类,传递进入位置信息
  <div ref=\"contentWrapper\" class=\"content-wrapper\" v-if=\"visible\"
    :class=\"{[`position-${position}`]:true}\">
  </div>  

  // 获得位置信息     
  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进行处理,主要是箭头当想
  <style lang=\"scss\" scoped>
  $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));
    /*通过drop-shadow解决小三角没有阴影的问题,但是兼容性不好 */
    /*box-shadow: 0 0 3px 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)
      }
    }

  }
</style>

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021662023

展开阅读全文

发表评论

登录后才能评论