first commit
This commit is contained in:
lingxiao865
@@ -0,0 +1,154 @@
|
||||
.t-collapse-panel {
|
||||
background-color: var(--td-collapse-panel-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
|
||||
}
|
||||
.t-collapse-panel--disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
.t-collapse-panel--disabled .t-collapse-panel__content,
|
||||
.t-collapse-panel--disabled .t-collapse-panel__header {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.t-collapse-panel--top {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.t-collapse-panel__header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: var(--td-collapse-horizontal-padding, 32rpx);
|
||||
height: var(--td-collapse-header-height, auto);
|
||||
}
|
||||
.t-collapse-panel__header--top {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__header--top::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__header--top::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__header--bottom {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__header--bottom::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__header--bottom::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__header::after {
|
||||
left: var(--td-spacer-2, 32rpx);
|
||||
}
|
||||
.t-collapse-panel__extra {
|
||||
font: var(--td-collapse-extra-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
}
|
||||
.t-collapse-panel__body {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__body::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__body::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__wrapper {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-collapse-panel__content {
|
||||
color: var(--td-collapse-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
font: var(--td-collapse-content-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
padding: var(--td-collapse-content-padding, 32rpx);
|
||||
}
|
||||
.t-collapse-panel__content--disabled {
|
||||
color: var(--td-collapse-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--bottom {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--bottom::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--bottom::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--top {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--top::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--top::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__arrow--top {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.class-title {
|
||||
font: var(--td-collapse-title-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
color: var(--td-collapse-header-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
}
|
||||
.class-left-icon {
|
||||
color: var(--td-collapse-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.class-right-icon {
|
||||
color: var(--td-collapse-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
}
|
||||
.class-title--disabled,
|
||||
.class-note--disabled,
|
||||
.class-left-icon--disabled,
|
||||
.class-right-icon--disabled {
|
||||
color: var(--td-collapse-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="[
|
||||
classPrefix + ' ' + classPrefix + '--' + placement,
|
||||
tClass
|
||||
]"
|
||||
>
|
||||
<view
|
||||
:class="classPrefix + '__title'"
|
||||
aria-role="button"
|
||||
:aria-expanded="expanded"
|
||||
:aria-disabled="ultimateDisabled"
|
||||
@click="onClick"
|
||||
>
|
||||
<t-cell
|
||||
:title="header"
|
||||
:note="headerRightContent"
|
||||
bordered
|
||||
:left-icon="headerLeftIcon"
|
||||
:right-icon="ultimateExpandIcon ? (expanded ? 'chevron-up' : 'chevron-down') : ''"
|
||||
:t-class="tools.cls(classPrefix + '__header', [placement, ['expanded', expanded]]) + ' ' + tClassHeader"
|
||||
:t-class-title="'class-title ' + (ultimateDisabled ? 'class-title--disabled' : '')"
|
||||
:t-class-note="'class-note ' + (ultimateDisabled ? 'class-note--disabled' : '')"
|
||||
:t-class-left-icon="'class-left-icon ' + (ultimateDisabled ? 'class-left-icon--disabled' : '')"
|
||||
:t-class-right-icon="'class-right-icon ' + classPrefix + '__arrow--' + placement + ' ' + (ultimateDisabled ? 'class-right-icon--disabled' : '')"
|
||||
t-class-hover="class-header-hover"
|
||||
:title-style="titleCustomStyle"
|
||||
:note-style="noteCustomStyle"
|
||||
:right-icon-style="rightIconCustomStyle"
|
||||
>
|
||||
<template
|
||||
#left-icon
|
||||
>
|
||||
<slot
|
||||
name="header-left-icon"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
#title
|
||||
>
|
||||
<slot
|
||||
name="header"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
#note
|
||||
>
|
||||
<slot
|
||||
name="header-right-content"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
#right-icon
|
||||
>
|
||||
<slot
|
||||
name="expand-icon"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
</view>
|
||||
<view
|
||||
:class="classPrefix + '__wrapper'"
|
||||
:animation="animation"
|
||||
:aria-hidden="expanded ? '' : true"
|
||||
>
|
||||
<view :class="tools.cls(classPrefix + '__content', [['disabled', ultimateDisabled], ['expanded', expanded], placement]) + ' ' + tClassContent">
|
||||
{{ content }}
|
||||
<slot />
|
||||
<slot name="content" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TCell from '../cell/cell';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import { getRect } from '../common/utils';
|
||||
import tools from '../common/utils.wxs';
|
||||
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
|
||||
|
||||
|
||||
const name = `${prefix}-collapse-panel`;
|
||||
const DISABLED_COLOR = 'var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, .26)))';
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-content`,
|
||||
`${prefix}-class-header`,
|
||||
],
|
||||
mixins: [ChildrenMixin(RELATION_MAP.CollapsePanel)],
|
||||
components: {
|
||||
TCell,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
expanded: false,
|
||||
classPrefix: name,
|
||||
classBasePrefix: prefix,
|
||||
ultimateExpandIcon: false,
|
||||
ultimateDisabled: false,
|
||||
tools,
|
||||
animation: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
titleCustomStyle() {
|
||||
return tools._style({
|
||||
fontSize: 'var(--td-collapse-title-font-size, var(--td-font-size-m, 16px))',
|
||||
color: this.ultimateDisabled && DISABLED_COLOR,
|
||||
});
|
||||
},
|
||||
noteCustomStyle() {
|
||||
return tools._style({
|
||||
color: this.ultimateDisabled && DISABLED_COLOR,
|
||||
|
||||
});
|
||||
},
|
||||
rightIconCustomStyle() {
|
||||
return tools._style({
|
||||
color: this.ultimateDisabled && DISABLED_COLOR,
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
disabled: {
|
||||
handler(e) {
|
||||
this.ultimateDisabled = !!e;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateExpanded(activeValues = []) {
|
||||
if (!this[RELATION_MAP.CollapsePanel]) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { value } = this;
|
||||
const { defaultExpandAll } = this[RELATION_MAP.CollapsePanel];
|
||||
const expanded = defaultExpandAll ? !this.expanded : activeValues?.includes(value);
|
||||
|
||||
if (expanded === this.expanded) return;
|
||||
|
||||
this.expanded = expanded;
|
||||
this.updateStyle(expanded);
|
||||
},
|
||||
|
||||
updateStyle(expanded) {
|
||||
return getRect(this, `.${name}__content`)
|
||||
.then(rect => rect.height)
|
||||
.then((height) => {
|
||||
const animation = uni.createAnimation({
|
||||
duration: 0,
|
||||
timingFunction: 'ease-in-out',
|
||||
});
|
||||
|
||||
if (expanded) {
|
||||
animation
|
||||
.height(height)
|
||||
.top(0)
|
||||
.step({ duration: 300 })
|
||||
.height('auto')
|
||||
.step();
|
||||
} else {
|
||||
let doAnimation = false;
|
||||
|
||||
// #ifdef H5 || APP-PLUS
|
||||
animation
|
||||
.height(height)
|
||||
.top(1)
|
||||
.step({ duration: 17 })
|
||||
.height(0)
|
||||
.step({ duration: 300 });
|
||||
doAnimation = true;
|
||||
// #endif
|
||||
|
||||
if (!doAnimation) {
|
||||
animation
|
||||
.height(height)
|
||||
.top(1)
|
||||
.step({ duration: 1 })
|
||||
.height(0)
|
||||
.step({ duration: 300 });
|
||||
}
|
||||
}
|
||||
|
||||
this.animation = animation.export();
|
||||
});
|
||||
},
|
||||
|
||||
onClick() {
|
||||
const { ultimateDisabled } = this;
|
||||
const { value } = this;
|
||||
|
||||
|
||||
if (ultimateDisabled) return;
|
||||
|
||||
if (this[RELATION_MAP.CollapsePanel].defaultExpandAll) {
|
||||
this.updateExpanded();
|
||||
} else {
|
||||
this[RELATION_MAP.CollapsePanel].switch(value);
|
||||
}
|
||||
},
|
||||
|
||||
innerAfterLinked() {
|
||||
const { dataValue, expandIcon, disabled } = this[RELATION_MAP.CollapsePanel];
|
||||
|
||||
this.ultimateExpandIcon = this.expandIcon == null ? expandIcon : this.expandIcon;
|
||||
this.ultimateDisabled = this.disabled == null ? disabled : this.disabled;
|
||||
|
||||
|
||||
let interval = 0;
|
||||
// #ifdef APP-PLUS
|
||||
interval = 33;
|
||||
// #endif
|
||||
setTimeout(() => {
|
||||
this.updateExpanded(dataValue);
|
||||
}, interval);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './collapse-panel.css';
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdCollapsePanelProps } from './type';
|
||||
export default {
|
||||
/** 折叠面板内容 */
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
/** 禁止当前面板展开，优先级大于 Collapse 的同名属性 */
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
/** 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 */
|
||||
expandIcon: {
|
||||
type: Boolean,
|
||||
default: undefined as TdCollapsePanelProps['expandIcon'],
|
||||
},
|
||||
/** 面板头内容 */
|
||||
header: {
|
||||
type: String,
|
||||
},
|
||||
/** 面板头左侧图标 */
|
||||
headerLeftIcon: {
|
||||
type: String,
|
||||
},
|
||||
/** 面板头的右侧区域，一般用于呈现面板操作 */
|
||||
headerRightContent: {
|
||||
type: String,
|
||||
},
|
||||
/** 选项卡内容的位置 */
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom' as TdCollapsePanelProps['placement'],
|
||||
validator(val: TdCollapsePanelProps['placement']): boolean {
|
||||
if (!val) return true;
|
||||
return ['bottom', 'top'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 */
|
||||
value: {
|
||||
type: [String, Number],
|
||||
},
|
||||
};
|
||||
41
uni_modules/tdesign-uniapp/components/collapse-panel/type.ts
Normal file
41
uni_modules/tdesign-uniapp/components/collapse-panel/type.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
export interface TdCollapsePanelProps {
|
||||
/**
|
||||
* 折叠面板内容
|
||||
*/
|
||||
content?: string;
|
||||
/**
|
||||
* 禁止当前面板展开，优先级大于 Collapse 的同名属性
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* 当前折叠面板展开图标，优先级大于 Collapse 的同名属性
|
||||
*/
|
||||
expandIcon?: boolean;
|
||||
/**
|
||||
* 面板头内容
|
||||
*/
|
||||
header?: string;
|
||||
/**
|
||||
* 面板头左侧图标
|
||||
*/
|
||||
headerLeftIcon?: string;
|
||||
/**
|
||||
* 面板头的右侧区域，一般用于呈现面板操作
|
||||
*/
|
||||
headerRightContent?: string;
|
||||
/**
|
||||
* 选项卡内容的位置
|
||||
* @default bottom
|
||||
*/
|
||||
placement?: 'bottom' | 'top';
|
||||
/**
|
||||
* 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识
|
||||
*/
|
||||
value?: string | number;
|
||||
}
|
||||
Reference in New Issue
Block a user