refactor: collapse

src/packages/collapse/doc.md

@@ -99,7 +99,7 @@ setup() {
 |------|------|------|
 | change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
 
-### CollapseItem Props
+### CollapseItem Prop
 | 参数 | 说明 | 类型 | 默认值 | 
 |------|------|------|------|
 | title | 标题栏左侧内容 | string | - |

src/packages/collapse/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <view @changeEvt="changeEvt">
+  <view>
     <slot></slot>
   </view>
 </template>
 <script lang="ts">
 import { toRefs, provide } from 'vue';
 import { createComponent } from '@/utils/create';
-const { create } = createComponent('collapse');
 import collapseitem from '@/packages/collapseitem/index.vue';
+const { create } = createComponent('collapse');
 export default create({
   children: [collapseitem],
   props: {
@@ -56,54 +56,38 @@ export default create({
   },
   emits: ['update:active', 'change'],
   setup(props, { emit }) {
-    const { active } = toRefs(props);
-    // 多个 item 展开
-    const changeValAry = (name: any) => {
+    const changeVal = (val: string | number | Array<string | number>) => {
+      emit('update:active', val);
+      emit('change', val);
+    };
+
+    const changeValAry = (name: string) => {
       const activeItem: any =
-        active?.value instanceof Object
-          ? Object.values(active.value)
-          : active?.value;
+        props.active instanceof Object
+          ? Object.values(props.active)
+          : props.active;
       let index = -1;
       activeItem.forEach((item: string | number, idx: number) => {
         if (String(item) == String(name)) {
           index = idx;
         }
       });
-      const v = JSON.parse(JSON.stringify(activeItem));
-      index > -1 ? v.splice(index, 1) : v.push(name);
-      emit('update:active', v);
-      emit('change', v);
-    };
-
-    // 更新v-modal的值
-    const changeVal = (
-      val: string | number | Array<string | number>,
-      expanded: boolean
-    ) => {
-      emit('update:active', val);
-      emit('change', val);
+      index > -1 ? activeItem.splice(index, 1) : activeItem.push(name);
+      changeVal(activeItem);
     };
 
     const isExpanded = (name: string | number | Array<string | number>) => {
       const { accordion, active } = props;
       if (accordion) {
-        if (typeof active == 'number' || typeof active == 'string') {
-          return active == name;
-        } else {
-          return false;
-        }
+        return typeof active === 'number' || typeof active === 'string'
+          ? active == name
+          : false;
       }
     };
 
     provide('collapseParent', {
       children: [],
-      value: props.active,
-      accordion: props.accordion,
-      expandIconPosition: props.expandIconPosition,
-      titleIcon: props.titleIcon,
-      titleIconPosition: props.titleIconPosition,
-      icon: props.icon,
-      rotate: props.rotate,
+      props,
       changeValAry,
       changeVal,
       isExpanded

src/packages/collapseitem/index.vue

@@ -1,11 +1,5 @@
 <template>
-  <view
-    :class="[
-      'nut-collapse-item',
-      { 'nut-collapse-item-left': classDirection == 'left' },
-      { 'nut-collapse-item-icon': icon && icon != 'none' }
-    ]"
-  >
+  <view :class="classes">
     <view
       :class="[
         'collapse-item',
@@ -79,7 +73,7 @@ import {
   ComponentInternalInstance
 } from 'vue';
 import { createComponent } from '@/utils/create';
-const { create } = createComponent('collapse-item');
+const { create, componentName } = createComponent('collapse-item');
 
 export default create({
   props: {
@@ -107,6 +101,14 @@ export default create({
   setup(props) {
     const collapse: any = inject('collapseParent');
     const parent: any = reactive(collapse);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-left`]: parent.props.classDirection === 'left',
+        [`${prefixCls}-icon`]: parent.props.icon && parent.props.icon !== 'none'
+      };
+    });
     const relation = (child: ComponentInternalInstance): void => {
       if (child.proxy) {
         parent.children.push(child.proxy);
@@ -124,14 +126,14 @@ export default create({
         'background-repeat': 'no-repeat',
         'background-size': '100% 100%',
         transform: 'rotate(0deg)',
-        marginTop: parent.iconHeght
-          ? '-' + parent.iconHeght / 2 + 'px'
+        marginTop: parent.props.iconHeght
+          ? '-' + parent.props.iconHeght / 2 + 'px'
           : '-10px'
       }
     });
     const titleIconStyle = reactive({
-      titleIcon: parent.titleIcon,
-      titleIconPosition: parent.titleIconPosition,
+      titleIcon: parent.props.titleIcon,
+      titleIconPosition: parent.props.titleIconPosition,
       titleIconWH: {
         width: '13px',
         height: '13px'
@@ -164,10 +166,15 @@ export default create({
         wrapperRefEle.style.height = !proxyData.openExpanded
           ? 0
           : contentHeight;
-        if (parent.icon && parent.icon != 'none' && !proxyData.openExpanded) {
+        if (
+          parent.props.icon &&
+          parent.props.icon != 'none' &&
+          !proxyData.openExpanded
+        ) {
           proxyData.iconStyle['transform'] = 'rotate(0deg)';
         } else {
-          proxyData.iconStyle['transform'] = 'rotate(' + parent.rotate + 'deg)';
+          proxyData.iconStyle['transform'] =
+            'rotate(' + parent.props.rotate + 'deg)';
         }
       }
       if (!proxyData.openExpanded) {
@@ -182,15 +189,15 @@ export default create({
 
     const defaultOpen = () => {
       open();
-      if (parent.icon && parent.icon != 'none') {
+      if (parent.props.icon && parent.props.icon != 'none') {
         proxyData['iconStyle']['transform'] =
-          'rotate(' + parent.rotate + 'deg)';
+          'rotate(' + parent.props.rotate + 'deg)';
       }
     };
 
     const currentName = computed(() => props.name);
     const toggleOpen = () => {
-      if (parent.accordion) {
+      if (parent.props.accordion) {
         parent.children.forEach((item: any, index: number) => {
           if (currentName.value == item.name) {
             item.changeOpen(!item.openExpanded);
@@ -200,7 +207,7 @@ export default create({
           }
         });
         nextTick(() => {
-          parent.changeVal(currentName.value, !proxyData.openExpanded);
+          parent.changeVal(currentName.value);
           animation();
         });
       } else {
@@ -228,7 +235,7 @@ export default create({
 
     onMounted(() => {
       const { name } = props;
-      const active = parent && parent.value;
+      const active = parent && parent.props.active;
 
       if (typeof active == 'number' || typeof active == 'string') {
         if (name == active) {
@@ -241,21 +248,23 @@ export default create({
         }
       }
 
-      proxyData.classDirection = parent.expandIconPosition;
-      if (parent.icon && parent.icon != 'none') {
-        proxyData.iconStyle['background-image'] = 'url(' + parent.icon + ')';
+      proxyData.classDirection = parent.props.expandIconPosition;
+      if (parent.props.icon && parent.props.icon != 'none') {
+        proxyData.iconStyle['background-image'] =
+          'url(' + parent.props.icon + ')';
       }
-      if (parent.iconWidth && parent.icon != 'none') {
-        proxyData.iconStyle['width'] = parent.conWidth;
+      if (parent.props.iconWidth && parent.props.icon != 'none') {
+        proxyData.iconStyle['width'] = parent.props.conWidth;
       }
-      if (parent.iconHeght && parent.icon != 'none') {
-        proxyData.iconStyle['height'] = parent.iconHeight;
+      if (parent.props.iconHeght && parent.props.icon != 'none') {
+        proxyData.iconStyle['height'] = parent.props.iconHeight;
       }
     });
 
     return {
+      classes,
       ...toRefs(proxyData),
-      ...toRefs(parent),
+      ...toRefs(parent.props),
       ...toRefs(titleIconStyle),
       wrapperRef,
       contentRef,