123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 |
- <template>
- <view class="uv-drop-down-popup">
- <uv-transition :show="show" mode="fade" :duration="300" :custom-style="overlayStyle" @click="clickOverlay">
- <view class="uv-dp__container" ref="uvDPContainer" :style="{height: `${height}px`}" @click.stop="blockClick">
- <view class="uv-dp__container__list" ref="uvDPList">
- <slot>
- <view class="uv-dp__container__list--item" v-for="(item,index) in list" :key="index" @click="clickHandler(item,index)" :style="[itemCustomStyle(index)]">
- <uv-text :text="item[keyName]" :size="getTextSize(index)" :color="getTextColor(index)"></uv-text>
- </view>
- </slot>
- </view>
- </view>
- </uv-transition>
- </view>
- </template>
- <script>
- import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
- import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
- // #ifdef APP-NVUE
- const animation = uni.requireNativePlugin('animation');
- const dom = uni.requireNativePlugin('dom');
- // #endif
- /**
- * DropDownPopup 下拉框
- * @description 下拉筛选框
- * @tutorial https://ext.dcloud.net.cn/plugin?name=uv-drop-down
- * @property {String | Number} name 字段标识
- * @property {String | Number} zIndex 弹出层的层级
- * @property {String | Number} opacity 遮罩层的透明度
- * @property {Boolean} clickOverlayOnClose 是否允许点击遮罩层关闭弹窗
- * @property {Object} currentDropItem 当前下拉筛选菜单对象
- * @property {String} keyName 指定从当前下拉筛选菜单对象元素中读取哪个属性作为文本展示
- */
- export default {
- name: 'uv-drop-down-popup',
- mixins: [mpMixin, mixin],
- props: {
- sign: {
- type: [String, Number],
- default: 'UVDROPDOWN'
- },
- zIndex: {
- type: [Number, String],
- default: 999
- },
- opacity: {
- type: [Number, String],
- default: 0.5
- },
- clickOverlayOnClose: {
- type: Boolean,
- default: true
- },
- // 当前下拉选项对象
- currentDropItem: {
- type: Object,
- default () {
- return {
- activeIndex: 0,
- child: []
- }
- }
- },
- keyName: {
- type: String,
- default: 'label'
- }
- },
- data() {
- return {
- show: false,
- rect: {},
- height: 0
- }
- },
- computed: {
- overlayStyle() {
- let { height = 0, top = 0 } = this.rect;
- // #ifdef H5
- top += this.$uv.sys().windowTop;
- // #endif
- const style = {
- position: 'fixed',
- top: `${top+height}px`,
- left: 0,
- right: 0,
- zIndex: this.zIndex,
- bottom: 0,
- 'background-color': `rgba(0, 0, 0, ${this.opacity})`
- }
- return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
- },
- list() {
- try {
- return Array.isArray(this.currentDropItem.child) ? this.currentDropItem.child : [];
- } catch (e) {
- return [];
- }
- },
- getTextColor(index) {
- return index => {
- const active = this.currentDropItem.activeIndex == index;
- const color = this.currentDropItem.color;
- const activeColor = this.currentDropItem.activeColor;
- if (active) {
- return activeColor ? activeColor : '#3c9cff';
- }
- return color ? color : '#333';
- }
- },
- getTextSize(index) {
- return index => {
- const active = this.currentDropItem.activeIndex == index;
- const size = this.currentDropItem.size;
- const activeSize = this.currentDropItem.activeSize;
- if (active) {
- return activeSize ? activeSize : '30rpx';
- }
- return size ? size : '30rpx';
- }
- },
- itemCustomStyle() {
- return index => {
- const active = this.currentDropItem.activeIndex == index;
- const style = {};
- if (active && this.currentDropItem.itemActiveCustomStyle) {
- return this.$uv.deepMerge(style, this.$uv.addStyle(this.currentDropItem.itemActiveCustomStyle));
- }
- if (this.currentDropItem.itemCustomStyle) {
- return this.$uv.deepMerge(style, this.$uv.addStyle(this.currentDropItem.itemCustomStyle))
- }
- return style;
- }
- }
- },
- created() {
- this.init();
- },
- methods: {
- blockClick() {},
- clickHandler(item, index) {
- this.currentDropItem.activeIndex = index;
- this.$emit('clickItem', item);
- this.close();
- },
- init() {
- uni.$off(`${this.sign}_GETRECT`);
- uni.$on(`${this.sign}_GETRECT`, rect => {
- this.rect = rect;
- })
- uni.$off(`${this.sign}_CLICKMENU`);
- uni.$on(`${this.sign}_CLICKMENU`, async res => {
- if (res.show) {
- this.open();
- } else {
- this.close();
- }
- })
- },
- open() {
- this.show = true;
- this.$nextTick(async () => {
- // #ifndef H5 || MP-WEIXIN
- await this.$uv.sleep(60);
- // #endif
- const res = await this.queryRect();
- // #ifndef APP-NVUE
- this.height = res.height;
- // #endif
- // #ifdef APP-NVUE
- this.animation(res.height);
- // #endif
- this.$emit('popupChange', { show: true });
- })
- },
- close() {
- if(!this.show) return;
- this.height = 0;
- // #ifndef APP-NVUE
- this.height = 0;
- // #endif
- // #ifdef APP-NVUE
- this.animation(0);
- // #endif
- this.show = false;
- uni.$emit(`${this.sign}_CLOSEPOPUP`);
- this.$emit('popupChange', { show: false });
- },
- clickOverlay() {
- if (this.clickOverlayOnClose) {
- this.close();
- }
- },
- // 查询内容高度
- queryRect() {
- // #ifndef APP-NVUE
- // 组件内部一般用this.$uvGetRect,对外的为getRect,二者功能一致,名称不同
- return new Promise(resolve => {
- this.$uvGetRect(`.uv-dp__container__list`).then(size => {
- resolve(size)
- })
- })
- // #endif
- // #ifdef APP-NVUE
- // nvue下,使用dom模块查询元素高度
- // 返回一个promise,让调用此方法的主体能使用then回调
- return new Promise(resolve => {
- dom.getComponentRect(this.$refs.uvDPList, res => {
- resolve(res.size)
- })
- })
- // #endif
- },
- // nvue下设置高度
- animation(height, duration = 200) {
- // #ifdef APP-NVUE
- const ref = this.$refs['uvDPContainer'];
- animation.transition(ref, {
- styles: {
- height: `${height}px`
- },
- duration
- })
- // #endif
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .uv-dp__container {
- /* #ifndef APP-NVUE */
- overflow: hidden;
- transition: all .15s;
- /* #endif */
- background-color: #fff;
- }
- .uv-dp__container__list {
- &--item {
- padding: 20rpx 60rpx;
- }
- }
- </style>
|