hht-magang/src/components/DropdownMenu.vue

<template>
  <div class="dropdown-menu" :class="{'toggle_disabled': disabled === true}" ref="elemId">
    <div v-if="inputed === false" class="fxrow dropdown-menu__item" @click="toggleItem">
      <span class="dropdown-menu__title" :class="{'dropdown-menu__title_up': up === true,'dropdown-menu__title--active': open === true,'dropdown-menu__title--active_up': up === true && open === true}"><div class="ellipsis chose_T">{{active === '' ? '请选择' : option[active].label}}</div></span>
    </div>
    <div v-if="inputed === true" class="fxrow dropdown-menu__item dropdown-menu__item_2">
      <input
      type="text"
      placeholder="请输入"
      class="fxcol drop_input"
      :value="value"
      @input="handleChange($event)">
      <span class="fxcol dropdown-menu__title dropdown-menu__title_2" :class="{'dropdown-menu__title_up': up === true,'dropdown-menu__title--active': open === true,'dropdown-menu__title--active_up': up === true && open === true}" @click="toggleItem"><div class="ellipsis">&nbsp;</div></span>
    </div>
    <div v-show="open" class="dropdown-item" :style="up === false ? 'top: .9rem' : 'bottom: .9rem'">
      <div ref="dropdown" class="dropdown-item__content">
        <div v-show="option.length > 0" v-for="(e, i) in option" :key="e.value" @click="$emit('dropdownMenu', i)" class="fxrow dropdown-item__option dropdown-item__option--active">
          <div class="cell__title" :class="{'cell__title--active': i + '' === active}"><span>{{e.label}}</span></div>
          <div class="iconfont check_icon" :class="{'check_icon--checked': i + '' === active}"></div>
        </div>
        <div v-show="option.length === 0" class="fxrow dropdown-item__option dropdown-item__option--active" @click="handleBlur">
          <div class="cell__title"><span>无匹配数据</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DropdownMenu',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: String,
    option: Array,
    active: String,
    open: Boolean,
    up: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    inputed: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleItem () {
      let cheight = document.body.clientHeight
      let bottom = this.$refs.elemId.getBoundingClientRect().bottom
      this.$refs.dropdown.style.maxHeight = (cheight - bottom - 20) + 'px'
      this.$emit('toggleItem')
    },
    handleChange ($event) {
      let cheight = document.body.clientHeight
      let bottom = this.$refs.elemId.getBoundingClientRect().bottom
      this.$refs.dropdown.style.maxHeight = (cheight - bottom - 20) + 'px'
      this.$emit('input', $event.target.value)
      this.$emit('handleChange', $event.target.value)
    },
    handleBlur () {
      this.$emit('handleBlur')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.dropdown-menu
  position relative
  height .9rem
  border .02rem solid #dcdfe6
  border-radius 4px
  background-color #fff
  user-select none
  width 100%
  // padding 0 .15rem
.selectopt
  // _font(.3rem, .9rem, #606266)
.selectbtn
  position relative
  flex 0 0 1rem
  _wh(.8rem, .8rem)
  vertical-align top
  background-color #cccccc
  &::before
    content ''
    width 0
    height 0
    border-left .5rem solid transparent
    border-right .5rem solid transparent
    border-top .5rem solid white
    position absolute
    right .15rem
    top .15rem
    pointer-events none
    z-index 3
.options
  position absolute
  z-index 100000
  top .9rem
  width 100%
  li
    width 100%
    _font(.12rem, .35rem, #000000)
    background-color #cccccc
    border-top 1px solid #ffffff
    padding 0 .3rem 0 .1rem
    user-select none
    &:hover
      background:#999
.dropdown-menu__item
  justify-content center
  height inherit
  width 100%
.dropdown-menu__item_2
  align-items flex-start
.drop_input
  height .86rem
  width calc(100% - 3rem)
  padding 0 .15rem
  color #606266
  font-size .3rem
  line-height .86rem
.dropdown-menu__title
  position relative
  width 100%
  padding 0 .15rem
  color #606266
  font-size .3rem
  line-height .44rem
  width 100%
  display block
  &::after
    position absolute
    top 50%
    right .16rem
    margin-top -.1rem
    border .06rem solid
    border-color transparent transparent #606266 #606266
    transform rotate(-45deg)
    opacity 0.8
    content ''
.dropdown-menu__title_2
  line-height .9rem
  max-width 1.4rem
  background-color #e5e5e5
  &::after
    right .16rem
.dropdown-menu__title_up
  &::after
    transform rotate(135deg)
    top calc(50% + .06rem)
.dropdown-menu__title--active, .dropdown-menu__title--active div
  color $red !important
  &::after
    border-color transparent transparent currentColor currentColor
    margin-top -.02rem
    transform rotate(135deg)
.dropdown-menu__title--active_up, .dropdown-menu__title--active_up div
  &::after
    transform rotate(-45deg)
    top calc(50% - .06rem)
.dropdown-item
  position absolute
  left 0
  width 100%
  z-index 10
  border-radius 4px
  overflow hidden
  box-shadow 0 0 .08rem 0.02rem rgba(160,160,160,0.9)
.dropdown-item__content
  position relative
  width 100%
  height auto
  z-index 2047
  overflow-y auto
  background-color #fff
  transition transform 0.3s
.dropdown-item__option
  width 100%
  height .9rem
  padding 0 .15rem
  overflow hidden
.cell__title
  height .9rem
  overflow hidden
  span
    _font(.3rem, .9rem, #606266)
.cell__title--active span
  color $red
.toggle_disabled
  background-color #f5f7fa
  border 0.02rem solid #e4e7ed
  cursor not-allowed
  .dropdown-menu__title
    div
      color #929292
    &::after
      border-color transparent transparent #929292 #929292
.chose_T
  width 100%
  overflow hidden
</style>