看板
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
import type { ExtractPropTypes, PropType } from 'vue';
|
||||
import type { TextAlign } from '../../types/global';
|
||||
import { baseProps } from '../common/props';
|
||||
|
||||
/**
|
||||
* u-collapse-item 手风琴Item Props
|
||||
* @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
|
||||
*/
|
||||
export const CollapseItemProps = {
|
||||
...baseProps,
|
||||
/** 标题 */
|
||||
title: { type: String, default: '' },
|
||||
/** 标题的对齐方式 */
|
||||
align: { type: String as PropType<TextAlign>, default: 'left' },
|
||||
/** 是否可以点击收起 */
|
||||
disabled: { type: Boolean, default: false },
|
||||
/** collapse显示与否 */
|
||||
open: { type: Boolean, default: false },
|
||||
/** 唯一标识符 */
|
||||
name: { type: [Number, String] as PropType<number | string>, default: '' },
|
||||
/** 活动样式 */
|
||||
activeStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
|
||||
/** 标识当前为第几个 */
|
||||
index: { type: [String, Number] as PropType<string | number>, default: '' }
|
||||
};
|
||||
|
||||
export type CollapseItemProps = ExtractPropTypes<typeof CollapseItemProps>;
|
||||
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<view class="u-collapse-item" :style="$u.toStyle(itemStyle, customStyle)" :class="customClass">
|
||||
<view
|
||||
:hover-stay-time="200"
|
||||
class="u-collapse-head"
|
||||
@tap.stop="headClick"
|
||||
:hover-class="hoverClass"
|
||||
:style="headStyle"
|
||||
>
|
||||
<template v-if="!slots['title-all']">
|
||||
<view v-if="!slots['title']" class="u-collapse-title u-line-1" :style="titleStyle">
|
||||
{{ title }}
|
||||
</view>
|
||||
<slot v-else name="title" />
|
||||
<view class="u-icon-wrap">
|
||||
<u-icon v-if="showArrow" :color="arrowColor" :name="isShow ? 'arrow-up' : 'arrow-down'" />
|
||||
</view>
|
||||
</template>
|
||||
<slot v-else name="title-all" />
|
||||
</view>
|
||||
|
||||
<view class="u-collapse-body" :style="{ height: isShow ? height : '0' }">
|
||||
<view class="u-collapse-content" :id="elId" :style="bodyStyle">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'u-collapse-item',
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true,
|
||||
// #endif
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, computed } from 'vue';
|
||||
import { $u, useChildren } from '../..';
|
||||
import { CollapseItemProps } from './types';
|
||||
|
||||
/**
|
||||
* collapseItem 手风琴Item
|
||||
* @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
|
||||
* @tutorial https://uviewpro.cn/zh/components/collapse.html
|
||||
* @property {String} title 面板标题
|
||||
* @property {String Number} index 主要用于事件的回调，标识那个Item被点击
|
||||
* @property {Boolean} disabled 面板是否可以打开或收起（默认false）
|
||||
* @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
|
||||
* @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值
|
||||
* @property {String} align 标题的对齐方式（默认left）
|
||||
* @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式
|
||||
* @event {Function} change 某个item被打开或者收起时触发
|
||||
* @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
|
||||
*/
|
||||
const props = defineProps(CollapseItemProps);
|
||||
const emit = defineEmits(['change']);
|
||||
const slots = useSlots();
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
const isShow = ref(false);
|
||||
const elId = ref('');
|
||||
const height = ref('0');
|
||||
const headStyle = ref<Record<string, any>>({});
|
||||
const bodyStyle = ref<Record<string, any>>({});
|
||||
const itemStyle = ref<Record<string, any>>({});
|
||||
const arrowColor = ref('');
|
||||
const hoverClass = ref('');
|
||||
|
||||
// 使用通信库的子组件Hook
|
||||
const { childId, parentExposed } = useChildren('u-collapse-item', 'u-collapse');
|
||||
|
||||
// 计算属性
|
||||
const showArrow = computed(() => {
|
||||
return parentExposed.value?.props ? parentExposed.value.props.arrow : true;
|
||||
});
|
||||
|
||||
const titleStyle = computed(() => {
|
||||
let style = { textAlign: props.align ? props.align : 'left' };
|
||||
|
||||
if (isShow.value && props.activeStyle && !showArrow.value) {
|
||||
style = $u.deepMerge(style, props.activeStyle);
|
||||
}
|
||||
return $u.toStyle(style);
|
||||
});
|
||||
|
||||
// 获取唯一标识符
|
||||
const itemName = computed(() => {
|
||||
// 优先级：name > index > childId
|
||||
if (props.name !== undefined && props.name !== '') {
|
||||
return props.name;
|
||||
} else if (props.index !== undefined && props.index !== '') {
|
||||
return props.index;
|
||||
} else {
|
||||
return childId;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 设置显示状态
|
||||
*/
|
||||
function setShowState(show: boolean) {
|
||||
if (isShow.value !== show) {
|
||||
isShow.value = show;
|
||||
|
||||
// 如果展开，需要重新计算高度
|
||||
if (show) {
|
||||
nextTick(() => {
|
||||
queryRect();
|
||||
});
|
||||
}
|
||||
|
||||
// 本地触发change事件
|
||||
emit('change', {
|
||||
index: props.index,
|
||||
name: itemName.value,
|
||||
show: isShow.value
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 异步获取内容，或者动态修改了内容时，需要重新初始化
|
||||
*/
|
||||
function init() {
|
||||
if (parentExposed.value?.props) {
|
||||
headStyle.value = parentExposed.value.props.headStyle || {};
|
||||
bodyStyle.value = parentExposed.value.props.bodyStyle || {};
|
||||
arrowColor.value = parentExposed.value.props.arrowColor || 'var(--u-tips-color)';
|
||||
hoverClass.value = parentExposed.value.props.hoverClass || 'u-hover-class';
|
||||
itemStyle.value = parentExposed.value.props.itemStyle || {};
|
||||
}
|
||||
|
||||
elId.value = $u.guid();
|
||||
nextTick(() => {
|
||||
queryRect();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击collapse head头部
|
||||
*/
|
||||
function headClick() {
|
||||
if (props.disabled) return;
|
||||
// 通知父组件状态变化
|
||||
parentExposed?.value?.onChange(itemName.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询内容高度
|
||||
*/
|
||||
function queryRect() {
|
||||
$u.getRect('#' + elId.value, instance)
|
||||
.then((res: any) => {
|
||||
if (res && res.height) {
|
||||
height.value = res.height + 'px';
|
||||
}
|
||||
// #ifdef MP-TOUTIAO
|
||||
if (isShow.value) {
|
||||
height.value = 'auto';
|
||||
}
|
||||
// #endif
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.warn('queryRect error:', err);
|
||||
height.value = 'auto';
|
||||
});
|
||||
}
|
||||
|
||||
// 单选
|
||||
function openSingle(data: any) {
|
||||
// 只有目标项展开，其他都关闭
|
||||
const shouldShow = data.targetName === itemName.value;
|
||||
setShowState(shouldShow);
|
||||
}
|
||||
|
||||
// 关闭所有
|
||||
function closeAll() {
|
||||
setShowState(false);
|
||||
}
|
||||
|
||||
// 多选
|
||||
function setMultiple(data: any) {
|
||||
const shouldShow = data.targetNames.includes(itemName.value);
|
||||
setShowState(shouldShow);
|
||||
}
|
||||
|
||||
// 切换单个
|
||||
function toggleSingle(data: any) {
|
||||
// 只有目标项才切换状态
|
||||
if (data.targetName === itemName.value) {
|
||||
setShowState(!isShow.value);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 关键修复：根据 open 属性设置初始状态
|
||||
setShowState(props.open);
|
||||
// 初始化
|
||||
init();
|
||||
});
|
||||
|
||||
// 监听 open 属性变化
|
||||
watch(
|
||||
() => props.open,
|
||||
newVal => {
|
||||
setShowState(newVal);
|
||||
}
|
||||
);
|
||||
|
||||
// 监听父组件exposed的变化
|
||||
watch(
|
||||
parentExposed,
|
||||
newExposed => {
|
||||
if (newExposed) {
|
||||
init();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
isShow,
|
||||
elId,
|
||||
height,
|
||||
headStyle,
|
||||
bodyStyle,
|
||||
itemStyle,
|
||||
arrowColor,
|
||||
hoverClass,
|
||||
itemName: itemName.value,
|
||||
queryRect,
|
||||
setShowState,
|
||||
openSingle,
|
||||
closeAll,
|
||||
setMultiple,
|
||||
toggleSingle
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../libs/css/style.components.scss';
|
||||
|
||||
.u-collapse-head {
|
||||
position: relative;
|
||||
@include vue-flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $u-main-color;
|
||||
font-size: 30rpx;
|
||||
line-height: 1;
|
||||
padding: 24rpx 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.u-collapse-title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-arrow-down-icon {
|
||||
transition: all 0.3s;
|
||||
margin-right: 20rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.u-arrow-down-icon-active {
|
||||
transform: rotate(180deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.u-collapse-body {
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.u-collapse-content {
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
color: $u-tips-color;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user