98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="select">
|
||
|
|
<div class="select-item pointer" @click="selectOption">
|
||
|
|
<div class="select-item-txt">{{defaultLabel}}</div>
|
||
|
|
<div class="select-item-button"> </div>
|
||
|
|
</div>
|
||
|
|
<ul v-show="active" class="options">
|
||
|
|
<li class="pointer" :class="{'li-active': e.index === index}" v-for="e in option" :key="e.index" @click="change(e)">{{e.label}}</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'SelectOpt',
|
||
|
|
props: {
|
||
|
|
option: Array,
|
||
|
|
index: [Number, String]
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
active: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
defaultLabel () {
|
||
|
|
let val = ''
|
||
|
|
this.option.map(e => {
|
||
|
|
if (e.index === this.index) {
|
||
|
|
val = e.label
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return val
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
selectOption () {
|
||
|
|
this.active = true
|
||
|
|
},
|
||
|
|
change (e) {
|
||
|
|
this.$emit('change', e.index)
|
||
|
|
this.active = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
@import '~@style/mixin'
|
||
|
|
.select
|
||
|
|
position relative
|
||
|
|
_wh(100%, inherit)
|
||
|
|
background-color #fff
|
||
|
|
user-select none
|
||
|
|
.select-item
|
||
|
|
width 100%
|
||
|
|
_fj(row)
|
||
|
|
.select-item-txt
|
||
|
|
width calc(100% - 50px)
|
||
|
|
_font(15px, inherit, #999,,left)
|
||
|
|
// padding 0 10px
|
||
|
|
.select-item-button
|
||
|
|
position relative
|
||
|
|
_wh(50px, inherit)
|
||
|
|
vertical-align top
|
||
|
|
&::before
|
||
|
|
content ''
|
||
|
|
width 0
|
||
|
|
height 0
|
||
|
|
border-left 5px solid transparent
|
||
|
|
border-right 5px solid transparent
|
||
|
|
border-top 5px solid #999
|
||
|
|
position absolute
|
||
|
|
right 13px
|
||
|
|
top 17px
|
||
|
|
pointer-events none
|
||
|
|
z-index 3
|
||
|
|
.options
|
||
|
|
position absolute
|
||
|
|
z-index 100000
|
||
|
|
top 44px
|
||
|
|
width 100%
|
||
|
|
padding 10px 0
|
||
|
|
background-color #fff
|
||
|
|
border 1px solid #eee
|
||
|
|
border-radius 5px
|
||
|
|
li
|
||
|
|
width 100%
|
||
|
|
_font(15px, 38px, #999,,left)
|
||
|
|
padding 0 10px
|
||
|
|
user-select none
|
||
|
|
box-sizing border-box
|
||
|
|
&:hover
|
||
|
|
background-color #f5f7fa
|
||
|
|
.li-active
|
||
|
|
color #409eff
|
||
|
|
</style>
|