|
|
<template> |
|
|
<view class="u-drawdown"> |
|
|
<view |
|
|
class="u-dropdown__menu" |
|
|
:style="{ |
|
|
height: $u.addUnit(height) |
|
|
}" |
|
|
ref="u-dropdown__menu" |
|
|
> |
|
|
<view |
|
|
class="u-dropdown__menu__item" |
|
|
v-for="(item, index) in menuList" |
|
|
:key="index" |
|
|
@tap.stop="clickHandler(item, index)" |
|
|
> |
|
|
<view class="u-dropdown__menu__item__content"> |
|
|
<text |
|
|
class="u-dropdown__menu__item__content__text" |
|
|
:style="[index === current ? activeStyle : inactiveStyle]" |
|
|
>{{item.title}}</text> |
|
|
<view |
|
|
class="u-dropdown__menu__item__content__arrow" |
|
|
:class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']" |
|
|
> |
|
|
<u-icon |
|
|
:name="menuIcon" |
|
|
:size="$u.addUnit(menuIconSize)" |
|
|
></u-icon> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="u-dropdown__content"> |
|
|
<slot /> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
import props from './props.js'; |
|
|
/** |
|
|
* Dropdown |
|
|
* @description |
|
|
* @tutorial url |
|
|
* @property {String} |
|
|
* @event {Function} |
|
|
* @example |
|
|
*/ |
|
|
export default { |
|
|
name: 'u-dropdown', |
|
|
mixins: [uni.$u.mixin, props], |
|
|
data() { |
|
|
return { |
|
|
// <EFBFBD>˵<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> |
|
|
menuList: [], |
|
|
current: 0 |
|
|
} |
|
|
}, |
|
|
computed: { |
|
|
|
|
|
}, |
|
|
created() { |
|
|
// <EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>(u-dropdown-item)<EFBFBD><EFBFBD>this<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>data<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>С<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ѭ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ö<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> |
|
|
this.children = []; |
|
|
}, |
|
|
methods: { |
|
|
clickHandler(item, index) { |
|
|
this.children.map(child => { |
|
|
if(child.title === item.title) { |
|
|
// this.queryRect('u-dropdown__menu').then(size => { |
|
|
child.$emit('click') |
|
|
child.setContentAnimate(child.show ? 0 : 300) |
|
|
child.show = !child.show |
|
|
// }) |
|
|
} else { |
|
|
child.show = false |
|
|
child.setContentAnimate(0) |
|
|
} |
|
|
}) |
|
|
}, |
|
|
// <EFBFBD><EFBFBD>ȡ<EFBFBD><EFBFBD>ǩ<EFBFBD>ijߴ<EFBFBD>λ<EFBFBD><EFBFBD> |
|
|
queryRect(el) { |
|
|
// #ifndef APP-NVUE |
|
|
// $uGetRectΪuView<EFBFBD>Դ<EFBFBD><EFBFBD>Ľڵ<EFBFBD><EFBFBD>ѯ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ĵ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ܣ<EFBFBD>https://www.uviewui.com/js/getRect.html |
|
|
// <EFBFBD><EFBFBD><EFBFBD><EFBFBD>ڲ<EFBFBD>һ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>this.$uGetRect<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ϊthis.$u.getRect<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>߹<EFBFBD><EFBFBD><EFBFBD>һ<EFBFBD>£<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ʋ<EFBFBD>ͬ |
|
|
return new Promise(resolve => { |
|
|
this.$uGetRect(`.${el}`).then(size => { |
|
|
resolve(size) |
|
|
}) |
|
|
}) |
|
|
// #endif |
|
|
|
|
|
// #ifdef APP-NVUE |
|
|
// nvue<EFBFBD>£<EFBFBD>ʹ<EFBFBD><EFBFBD>domģ<EFBFBD><EFBFBD><EFBFBD>ѯԪ<EFBFBD>ظ߶<EFBFBD> |
|
|
// <EFBFBD><EFBFBD><EFBFBD><EFBFBD>һ<EFBFBD><EFBFBD>promise<EFBFBD><EFBFBD><EFBFBD>õ<EFBFBD><EFBFBD>ô˷<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʹ<EFBFBD><EFBFBD>then<EFBFBD>ص<EFBFBD> |
|
|
return new Promise(resolve => { |
|
|
dom.getComponentRect(this.$refs[el], res => { |
|
|
resolve(res.size) |
|
|
}) |
|
|
}) |
|
|
// #endif |
|
|
}, |
|
|
}, |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style lang="scss"> |
|
|
@import '../../libs/css/components.scss'; |
|
|
|
|
|
.u-dropdown { |
|
|
|
|
|
&__menu { |
|
|
@include flex; |
|
|
|
|
|
&__item { |
|
|
flex: 1; |
|
|
@include flex; |
|
|
justify-content: center; |
|
|
|
|
|
&__content { |
|
|
@include flex; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style>
|
|
|
|
