fix(accordion): fix expand and collapse
This commit is contained in:
Sagi
parent
b7279299f5
commit
e278665c4b
|
|
@ -1,38 +0,0 @@
|
|||
import { isContext } from 'vm';
|
||||
import { computed, defineComponent, SetupContext } from 'vue';
|
||||
import { AccordingProps, accordingProps } from './according.props';
|
||||
|
||||
import './according.css';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FAccording',
|
||||
props: accordingProps,
|
||||
emits: [],
|
||||
setup(props: AccordingProps, context: SetupContext) {
|
||||
const accordingStyle = computed(() => ({
|
||||
height: props.height ? `${props.height}px` : '',
|
||||
width: props.width ? `${props.width}px` : ''
|
||||
}));
|
||||
|
||||
const accordingClass = computed(() => {
|
||||
const customClassArray = props.customClass;
|
||||
const accordingClassObject = {
|
||||
'farris-panel': true,
|
||||
according: true
|
||||
};
|
||||
customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
|
||||
classObject[classString] = true;
|
||||
return classObject;
|
||||
}, accordingClassObject);
|
||||
return accordingClassObject;
|
||||
});
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div class={accordingClass.value} style={accordingStyle.value}>
|
||||
{context.slots.default && context.slots.default()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
/* 很重要 */
|
||||
.farris-panel {
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { ExtractPropTypes } from 'vue';
|
||||
|
||||
export const accordingItemProps = {
|
||||
width: { type: Number },
|
||||
height: { type: Number },
|
||||
title: { type: String, default: '' },
|
||||
disable: { type: Boolean, default: false }
|
||||
};
|
||||
export type AccordingItemProps = ExtractPropTypes<typeof accordingItemProps>;
|
||||
|
|
@ -18,7 +18,7 @@ export default defineComponent({
|
|||
const customClassArray = props.customClass;
|
||||
const accordionClassObject = {
|
||||
'farris-panel': true,
|
||||
according: true
|
||||
'accordion': true
|
||||
};
|
||||
customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
|
||||
classObject[classString] = true;
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
.card-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel-item-title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.panel-item-tool {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.panel-item-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.f-state-disable {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 很重要 */
|
||||
.card {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
|
@ -12,7 +12,9 @@ export default defineComponent({
|
|||
const isActive = ref(false);
|
||||
const isDisabled = ref(false);
|
||||
|
||||
function selectAccordionItem() {}
|
||||
function selectAccordionItem() {
|
||||
isActive.value = !isActive.value;
|
||||
}
|
||||
|
||||
function onClick($event: Event) {
|
||||
selectAccordionItem();
|
||||
|
|
@ -35,15 +37,21 @@ export default defineComponent({
|
|||
|
||||
const headIconClass = computed(() => ({
|
||||
'f-icon': true,
|
||||
<<<<<<< HEAD:packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx
|
||||
'f-accordion-collapse': !isActive.value,
|
||||
'f-accordion-expand': isActive.value
|
||||
=======
|
||||
'f-according-collapse': !isActive.value,
|
||||
'f-according-expand': isActive.value
|
||||
>>>>>>> master:packages/ui-vue/components/according/src/components/according-item.component.tsx
|
||||
}));
|
||||
|
||||
const cardContainerStyle = computed(() => {
|
||||
const styleObject = {
|
||||
transition: 'height 0.36s ease 0s',
|
||||
height: isActive.value ? `${props.height}px` : 0
|
||||
};
|
||||
if (!isActive.value) {
|
||||
styleObject['overflow'] = 'hidden';
|
||||
}
|
||||
return styleObject;
|
||||
});
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div class={accordionItemClass.value}>
|
||||
|
|
@ -56,7 +64,7 @@ export default defineComponent({
|
|||
<div class="panel-item-tool">{context.slots.toolbar && context.slots.toolbar()}</div>
|
||||
<div class="panel-item-clear"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={cardContainerStyle.value}>
|
||||
<div class="card-body">{context.slots.content && context.slots.content()}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { ExtractPropTypes } from 'vue';
|
|||
|
||||
export const accordionItemProps = {
|
||||
width: { type: Number },
|
||||
height: { type: Number },
|
||||
height: { type: Number, default: 100 },
|
||||
title: { type: String, default: '' },
|
||||
disable: { type: Boolean, default: false }
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,4 +22,15 @@
|
|||
.card {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
height: initial;
|
||||
transition: height 0.35s ease;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s ease;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import According from '../../components/according/src/according.component';
|
||||
import AccordingItem from '../../components/according/src/components/according-item.component';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<According>
|
||||
<AccordingItem title="According Panel One"></AccordingItem>
|
||||
<AccordingItem title="According Panel Two"></AccordingItem>
|
||||
</According>
|
||||
</template>
|
||||
|
|
@ -5,7 +5,7 @@ import AccordionItem from '../../components/accordion/src/components/accordion-i
|
|||
|
||||
<template>
|
||||
<Accordion>
|
||||
<AccordionItem title="According Panel One"></AccordionItem>
|
||||
<AccordionItem title="According Panel Two"></AccordionItem>
|
||||
<AccordionItem title="Accordion Panel One "></AccordionItem>
|
||||
<AccordionItem title="Accordion Panel Two "></AccordionItem>
|
||||
</Accordion>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue