341 lines
11 KiB
Vue
341 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="u-dropdown" :style="$u.toStyle(styles, customStyle)" :class="customClass">
|
|||
|
|
<view
|
|||
|
|
class="u-dropdown__menu"
|
|||
|
|
:style="{ height: $u.addUnit(height) }"
|
|||
|
|
:class="{ 'u-border-bottom': borderBottom }"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="u-dropdown__menu__item"
|
|||
|
|
v-for="(item, index) in menuList"
|
|||
|
|
:key="index"
|
|||
|
|
@tap.stop="menuClick(index)"
|
|||
|
|
>
|
|||
|
|
<view class="u-flex">
|
|||
|
|
<text
|
|||
|
|
class="u-dropdown__menu__item__text"
|
|||
|
|
:style="{
|
|||
|
|
color: item.disabled
|
|||
|
|
? 'var(--u-light-color)'
|
|||
|
|
: index === current || highlightIndex == index
|
|||
|
|
? activeColor
|
|||
|
|
: inactiveColor,
|
|||
|
|
fontSize: $u.addUnit(titleSize)
|
|||
|
|
}"
|
|||
|
|
>{{ item.title }}</text
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="u-dropdown__menu__item__arrow"
|
|||
|
|
:class="{
|
|||
|
|
'u-dropdown__menu__item__arrow--rotate': index === current
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<u-icon
|
|||
|
|
:custom-style="{ display: 'flex' }"
|
|||
|
|
:name="menuIcon"
|
|||
|
|
:size="$u.addUnit(menuIconSize)"
|
|||
|
|
:color="index === current || highlightIndex == index ? activeColor : 'var(--u-light-color)'"
|
|||
|
|
></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="u-dropdown__content"
|
|||
|
|
:style="[
|
|||
|
|
contentStyle,
|
|||
|
|
{
|
|||
|
|
transition: `opacity ${Number(duration) / 1000}s linear`,
|
|||
|
|
top: $u.addUnit(height),
|
|||
|
|
height: contentHeight + 'px'
|
|||
|
|
}
|
|||
|
|
]"
|
|||
|
|
@tap="maskClick"
|
|||
|
|
@touchmove.stop.prevent
|
|||
|
|
>
|
|||
|
|
<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-dropdown__content__mask"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-dropdown',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, onMounted, getCurrentInstance, nextTick } from 'vue';
|
|||
|
|
import { $u, useParent } from '../..';
|
|||
|
|
import { DropdownProps } from './types';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* dropdown 下拉菜单
|
|||
|
|
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
|
|||
|
|
* @tutorial https://uviewpro.cn/zh/components/dropdown.html
|
|||
|
|
* @property {String} active-color 标题和选项卡选中的颜色（默认主题色primary）
|
|||
|
|
* @property {String} inactive-color 标题和选项卡未选中的颜色（默认var(--u-content-color)）
|
|||
|
|
* @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
|
|||
|
|
* @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
|
|||
|
|
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
|
|||
|
|
* @property {String | Number} height 标题菜单的高度，单位任意（默认80）
|
|||
|
|
* @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
|
|||
|
|
* @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
|
|||
|
|
* @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
|
|||
|
|
* @event {Function} open 下拉菜单被打开时触发
|
|||
|
|
* @event {Function} close 下拉菜单被关闭时触发
|
|||
|
|
* @example <u-dropdown></u-dropdown>
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const props = defineProps(DropdownProps);
|
|||
|
|
const emit = defineEmits(['open', 'close']);
|
|||
|
|
|
|||
|
|
const { children } = useParent('u-dropdown');
|
|||
|
|
// 菜单列表
|
|||
|
|
const menuList = ref<any[]>([]);
|
|||
|
|
// 下拉菜单的状态
|
|||
|
|
const active = ref(false);
|
|||
|
|
// 当前激活菜单索引
|
|||
|
|
// 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
|
|||
|
|
// 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
|
|||
|
|
const current = ref<number>(99999);
|
|||
|
|
// 外层内容样式
|
|||
|
|
const contentStyle = ref<any>({ zIndex: -1, opacity: 0 });
|
|||
|
|
// 高亮菜单索引
|
|||
|
|
const highlightIndex = ref<number>(99999);
|
|||
|
|
// 下拉内容高度
|
|||
|
|
const contentHeight = ref<number>(0);
|
|||
|
|
// 子组件引用
|
|||
|
|
const instance = getCurrentInstance();
|
|||
|
|
// 兼容头条样式
|
|||
|
|
const styles = computed(() => {
|
|||
|
|
const style: any = {};
|
|||
|
|
// #ifdef MP-TOUTIAO
|
|||
|
|
style.width = '100vw';
|
|||
|
|
// #endif
|
|||
|
|
return style;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 下拉出来部分的样式
|
|||
|
|
const popupStyle = computed<any>(() => {
|
|||
|
|
const style: any = {};
|
|||
|
|
// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
|
|||
|
|
style.transform = `translateY(${active.value ? 0 : '-100%'})`;
|
|||
|
|
style['transition-duration'] = Number(props.duration) / 1000 + 's';
|
|||
|
|
style.borderRadius = `0 0 ${$u.addUnit(props.borderRadius)} ${$u.addUnit(props.borderRadius)}`;
|
|||
|
|
return style;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 生命周期
|
|||
|
|
onMounted(() => {
|
|||
|
|
getContentHeight();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化所有子组件
|
|||
|
|
* 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
|
|||
|
|
* 以保证数据的正确性
|
|||
|
|
*/
|
|||
|
|
function init() {
|
|||
|
|
menuList.value = [];
|
|||
|
|
children.forEach(child => {
|
|||
|
|
// 过滤不显示的项
|
|||
|
|
const show = child?.getExposed()?.props.show !== false;
|
|||
|
|
if (!show) return;
|
|||
|
|
|
|||
|
|
menuList.value.push({
|
|||
|
|
title: child?.getExposed()?.props.title ?? '',
|
|||
|
|
disabled: child?.getExposed()?.props.disabled ?? false,
|
|||
|
|
childIndex: children.indexOf(child)
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击菜单
|
|||
|
|
* @param index 菜单索引
|
|||
|
|
*/
|
|||
|
|
function menuClick(index: number) {
|
|||
|
|
// 判断是否被禁用
|
|||
|
|
if (menuList.value[index]?.disabled) return;
|
|||
|
|
// 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
|
|||
|
|
if (index === current.value && props.closeOnClickSelf) {
|
|||
|
|
close();
|
|||
|
|
// 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
|
|||
|
|
const childIndex = menuList.value[index]?.childIndex; //避免访问到show为false的项
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (childIndex !== undefined && children[childIndex]) {
|
|||
|
|
children[childIndex]?.getExposed()?.setActive(false);
|
|||
|
|
}
|
|||
|
|
}, Number(props.duration));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
open(index);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 打开下拉菜单
|
|||
|
|
* @param index 菜单索引
|
|||
|
|
*/
|
|||
|
|
function open(index: number) {
|
|||
|
|
// 嵌套popup使用时可能获取不到正确的高度，重新计算
|
|||
|
|
if (contentHeight.value < 1) getContentHeight();
|
|||
|
|
// 重置高亮索引，否则会造成多个菜单同时高亮
|
|||
|
|
// highlightIndex.value = 9999;
|
|||
|
|
// 展开时，设置下拉内容的样式
|
|||
|
|
contentStyle.value = { zIndex: 11 };
|
|||
|
|
// 标记展开状态以及当前展开项的索引
|
|||
|
|
active.value = true;
|
|||
|
|
current.value = index;
|
|||
|
|
// 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
|
|||
|
|
// 之所以不是因display: none，是因为nvue没有display这个属性
|
|||
|
|
const childIndex = menuList.value[index]?.childIndex; //避免访问到show为false的项
|
|||
|
|
children.forEach((child, idx) => {
|
|||
|
|
child?.getExposed()?.setActive(childIndex === idx ? true : false);
|
|||
|
|
});
|
|||
|
|
emit('open', current.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置下拉菜单处于收起状态
|
|||
|
|
*/
|
|||
|
|
function close() {
|
|||
|
|
emit('close', current.value);
|
|||
|
|
// 设置为收起状态，同时current归位，设置为空字符串
|
|||
|
|
active.value = false;
|
|||
|
|
current.value = 99999;
|
|||
|
|
// 下拉内容的样式进行调整，不透明度设置为0
|
|||
|
|
contentStyle.value = { zIndex: -1, opacity: 0 };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击遮罩
|
|||
|
|
*/
|
|||
|
|
function maskClick() {
|
|||
|
|
// 如果不允许点击遮罩，直接返回
|
|||
|
|
if (!props.closeOnClickMask) return;
|
|||
|
|
close();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 外部手动设置某个菜单高亮
|
|||
|
|
* @param index 菜单索引
|
|||
|
|
*/
|
|||
|
|
function highlight(index?: number) {
|
|||
|
|
highlightIndex.value = index !== undefined ? index : 99999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取下拉菜单内容的高度
|
|||
|
|
* 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
|
|||
|
|
* 才能让遮罩占满菜单一下，直到屏幕底部的高度
|
|||
|
|
* this.$u.sys()为uView封装的获取设备信息的方法
|
|||
|
|
*/
|
|||
|
|
function getContentHeight() {
|
|||
|
|
const windowHeight = $u.sys().windowHeight;
|
|||
|
|
|
|||
|
|
$u.getRect('.u-dropdown__menu', instance).then((res: any) => {
|
|||
|
|
// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
|
|||
|
|
// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
|
|||
|
|
// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
|
|||
|
|
// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
|
|||
|
|
contentHeight.value = windowHeight - res.bottom;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
init();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 暴露方法
|
|||
|
|
defineExpose({
|
|||
|
|
props,
|
|||
|
|
init,
|
|||
|
|
close,
|
|||
|
|
open,
|
|||
|
|
highlight,
|
|||
|
|
getContentHeight,
|
|||
|
|
children,
|
|||
|
|
menuList
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
@import '../../libs/css/style.components.scss';
|
|||
|
|
|
|||
|
|
.u-dropdown {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&__menu {
|
|||
|
|
@include vue-flex;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 11;
|
|||
|
|
height: 80rpx;
|
|||
|
|
|
|||
|
|
&__item {
|
|||
|
|
flex: 1;
|
|||
|
|
@include vue-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
&__text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: $u-content-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__arrow {
|
|||
|
|
margin-left: 6rpx;
|
|||
|
|
transition: transform 0.3s;
|
|||
|
|
align-items: center;
|
|||
|
|
@include vue-flex;
|
|||
|
|
|
|||
|
|
&--rotate {
|
|||
|
|
transform: rotate(180deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__content {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 8;
|
|||
|
|
width: 100%;
|
|||
|
|
left: 0px;
|
|||
|
|
bottom: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
&__mask {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 9;
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
width: 100%;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__popup {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
transform: translate3D(0, -100%, 0);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|