cz-hjjc-ht/src/components/XySelectors/index.vue

<script>
export default {
  props:{

  },
  data() {
    return {
      isShowSelector:false,
      width:300,
      left:0,
    }
  },
  methods: {
    initStyle(){
      const header = document.querySelector('.v-header').getBoundingClientRect()
      this.width = header.width
      const select = document.querySelector('.xy-selectors').getBoundingClientRect()
      this.left = select.left - header.left

      this.$forceUpdate()
    },

    showSelector(){
      this.isShowSelector =! this.isShowSelector
    },
    renderAdd(){
      return (<Button
        class="xy-selectors-btn__item"
        type='primary'
        on={{
          ['click']:()=>this.$emit('add')
        }}>
        新增
      </Button>)
    }
  },
  mounted() {
    this.initStyle()

    window.onresize = this.initStyle
  },
  destroyed() {
    window.onresize = null
  },
  render(h) {
    let {isShowSelector,showSelector,$scopedSlots} = this

    return (
      <div class="xy-selectors">
        <div v-show={isShowSelector} style={{'width':'100vw','height':'100vh','position':'fixed','top':0,'left':0,'z-index':1}} on={{['click']:()=>this.isShowSelector = false}}></div>
        <Button
          icon='md-arrow-dropdown'
          ghost={isShowSelector}
          class={isShowSelector ? 'xy-selectors-btn__item xy-selectors-btn__select xy-selectors-btn-active__select' : 'xy-selectors-btn__item xy-selectors-btn__select"'}
          type='primary'
          on={{
            ['click']:() => showSelector()
          }}>
          高级搜索
        </Button>

        <transition
          enter-active-class="scale-enter"
          leave-to-class="scale-leave">
          <div class="xy-selectors-card" style={{'width':`${this.width}px`,'left':`-${this.left}px`}} v-show={isShowSelector}>
            <Icon
              type="md-close"
              size={24}
              class="xy-selectors-card__close"
              on={{['click']:()=> {
                  this.isShowSelector = false
                }}}/>
            <div class="xy-selectors-card-content">
              {$scopedSlots?.selected ? $scopedSlots?.selected() : ''}
              {$scopedSlots?.default ? $scopedSlots?.default() : ''}
            </div>
            <div class="xy-selectors-card-btn">
              <Button
                class="xy-selectors-card-btn__item"
                type="primary"
                ghost={true}
                on={{['click']:()=>{this.$emit('reset')}}}>重置</Button>
              <Button
                class="xy-selectors-card-btn__item"
                type="primary"
                on={{['click']:()=>{
                  this.$emit('search')
                  this.isShowSelector = false
                }}}>搜索</Button>
            </div>
          </div>
        </transition>
      </div>
    )
  }

}
</script>


<style lang="scss">
.xy-selectors{

  &__item{
    display: flex;
    align-items: center;

    padding: 8px 20px;

    &--name{
      width: 100px;

      margin-right: 20px;
    }
  }
}
</style>
<style scoped lang="scss">
@import "../../styles/variables";
.xy-selectors{

  position: relative;
  &-btn{
    //display: flex;
    //justify-content: flex-start;
    //align-items: center;
    &__item{

      //margin-right: 10px;
    }
    &__select{

    }
    &-active__select{
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: none;
      box-shadow: 0 2px 10px 1px var(--theme-color);

      position: relative;
      &::after{
        content:'';
        height: 12px;
        background: linear-gradient(to top,rgba(235,238,244,0.98) 40%,#0000 80%,#0000);

        z-index: 5;
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
      }
    }
  }
  &-card{
    //width: 100%;
    background: rgba(239,242,250,0.95);
    border-radius: 0 4px 4px 4px;
    border: var(--theme-color) solid 1px;
    box-shadow: 0 4px 10px 1px var(--theme-color);

    z-index: 4;
    position: absolute;
    &__close{
      cursor: pointer;

      position: absolute;
      top: 6px;
      right: 14px;
    }
    &-content{
      min-height: 50px;
      max-height: 400px;
      overflow: scroll;

      padding: 36px 0 44px 8px;
      &::-webkit-scrollbar-thumb{
        background: var(--theme-color);
      }
    }
    &-btn{
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      background: rgba(239,242,250,0.95);

      position: absolute;
      bottom: 0;
      &__item{
        width: 120px;

        margin: 10px 0px;
      }
    }
  }
}

.scale-enter{
  transform-origin: 0 0%;
  animation: scale-enter 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes scale-enter {
  from{
    transform: scaleY(0);
    opacity: 0;
  }
  to{
    transform: scaleY(1);
    opacity: 1;
  }
}
.scale-leave{
  transform-origin: 0 0%;
  animation: scale-leave 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes scale-leave {
  from{
    transform: scaleY(1);
    opacity: 1;
  }
  to{
    transform: scaleY(0);
    opacity: 0;
  }
}
</style>