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

下拉框

Browse Source
This commit is contained in:
caill
2023-04-17 17:20:53 +08:00
parent 804afc3d27
commit d875f978a7
19 changed files with 684 additions and 1656 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/DropdownMenu.vue
View File

@@ -1,7 +1,11 @@
<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 v-if="inputed === false" class="dropdown-menu__item dropdown-menu__item_1">
<div 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}" @click="toggleItem">
<div class="ellipsis chose_T">{{active === '' ? '请选择' : option[active].label}}</div>
<div class="iconfont dropdown_icon"></div>
</div>
<div v-show="active !== '' && cancleShow === true" class="iconfont error_icon" @click="cancleDropdown"></div>
</div>
<div v-if="inputed === true" class="fxrow dropdown-menu__item dropdown-menu__item_2">
<input
@@ -10,15 +14,18 @@
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>
<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>
<div class="iconfont dropdown_icon"></div>
</span>
</div>
<div v-show="open" class="dropdown-item" :style="up === false ? 'top: .9rem' : 'bottom: .9rem'">
<div v-show="open" class="dropdown-item" :style="up === false ? 'top:' + gap : 'bottom:' + gap">
<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 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" :style="{height: gap, lineHeight: gap}">
<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 v-show="option.length === 0" class="fxrow dropdown-item__option dropdown-item__option--active" :style="{height: gap, lineHeight: gap}" @click="handleBlur">
<div class="cell__title"><span>无匹配数据</span></div>
</div>
</div>
@@ -49,24 +56,43 @@ export default {
inputed: {
type: Boolean,
default: false
},
gap: {
type: String,
default: '.9rem'
},
autoHeight: {
type: Boolean,
default: false
},
cancleShow: {
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'
if (!this.autoHeight) {
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'
if (!this.autoHeight) {
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')
},
cancleDropdown () {
this.$emit('cancleDropdown')
}
}
}
@@ -121,6 +147,8 @@ export default {
justify-content center
height inherit
width 100%
.dropdown-menu__item_1
_fj()
.dropdown-menu__item_2
align-items flex-start
.drop_input
@@ -132,23 +160,24 @@ export default {
line-height .86rem
.dropdown-menu__title
position relative
width 100%
padding 0 .15rem
width calc(100% - .5rem)
padding-left .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 ''
_fj()
// 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
@@ -186,14 +215,14 @@ export default {
transition transform 0.3s
.dropdown-item__option
width 100%
height .9rem
// height .9rem
padding 0 .15rem
overflow hidden
.cell__title
height .9rem
height inherit
overflow hidden
span
_font(.3rem, .9rem, #606266)
_font(.3rem, inherit, #606266)
.cell__title--active span
color $red
.toggle_disabled
@@ -208,4 +237,19 @@ export default {
.chose_T
width 100%
overflow hidden
.top
top .9rem
.bottom
top .9rem
.dropdown_icon
font-size .25rem
color #dcdfe6
.error_icon
width .3rem
height .3rem
font-size .25rem
line-height .3rem
color #dcdfe6
border .01rem solid #dcdfe6
margin-right .15rem
</style>