fix(accordion): fix accordion name and merge code
This commit is contained in:
commit
b7279299f5
|
@ -0,0 +1,38 @@
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
|
@ -0,0 +1,4 @@
|
||||||
|
/* 很重要 */
|
||||||
|
.farris-panel {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
|
}
|
|
@ -0,0 +1,9 @@
|
||||||
|
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>;
|
|
@ -0,0 +1,25 @@
|
||||||
|
.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;
|
||||||
|
}
|
|
@ -35,8 +35,13 @@ export default defineComponent({
|
||||||
|
|
||||||
const headIconClass = computed(() => ({
|
const headIconClass = computed(() => ({
|
||||||
'f-icon': true,
|
'f-icon': true,
|
||||||
|
<<<<<<< HEAD:packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx
|
||||||
'f-accordion-collapse': !isActive.value,
|
'f-accordion-collapse': !isActive.value,
|
||||||
'f-accordion-expand': 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
|
||||||
}));
|
}));
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
<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>
|
Loading…
Reference in New Issue