Collapse

Collapse

可以折叠/展开的内容区域。

说明

组件API详细内容请参考：https://www.antdv.com/components/collapse-cn

新增属性

• 属性说明：

使用方法

• 代码示例：

  // 在script标签中按需引入
  import { Collapse  } from '@jecloud/ui';
  export default {
    components: { Collapse, CollapsePanel: Collapse.Panel, },
    setup() {
        const activeKey = ref([]);
        const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
        return {
            activeKey,
            text,
        };
    },
  };
  // 在vue的template标签中
  <Collapse
     style="height: 500px"
     v-model:activeKey="activeKey2"
     accordion
     disableEmptyActive
     flexLayout
  >
     <CollapsePanel key="1" header="This is panel header 1">
         <p>{{ text }}</p>
     </CollapsePanel>
     <CollapsePanel key="2" header="This is panel header 2">
         <p>{{ text }}</p>
     </CollapsePanel>
     <CollapsePanel key="3" header="This is panel header 3">
         <p>{{ text }}</p>
     </CollapsePanel>
  </Collapse>

• 事件脚本示例：

  const { Collapse } = JE.useUi(); 
  const { h,createVNode }= JE.useVue();
  const Vnode = ["1", "2", "3"].map((item, index) => {
  return h(
    Collapse.Panel,
    {
    key: item,
    header: `This is panel header${item}`,
    },
    `这是${item}的text`
    );
  });
  return h(Collapse, {activeKey: "1",accordion: true,disableEmptyActive: true,flexLayout:true,style:{height:"300px"}}, Vnode);

• 注意：
  如果给Flex布局布局的Collapse固定高度，那么disableEmptyActive、flexLayout、accordion都为true