root/hht-magang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
xiangxy
2022-12-12 14:46:16 +08:00
commit a12aec5a7c
141 changed files with 25284 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/components/DropdownMenu.vue Normal file
View File

@@ -0,0 +1,212 @@
<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>