展开或收起 - IKExpandCollapse

张东亮

props

props	类型	说明	默认值
showType	String	展示形式 图标(icon)，文字(word)，图标和文字(wordIcon)	"word"
isExpand	Boolean	是否展开	true
wordName	String	替换展开/收起的文字标签	""

事件

名称	说明
handleChangStatus	点击 展开/收起 按钮触发

示例代码

<script lang="ts" setup>
// 箭头类型
const isFoldArrow = ref<boolean>(false);
// 文字类型
const isFoldWord = ref<boolean>(false);
// 箭头文字类型
const isFoldAll = ref<boolean>(false);
// 展示demo内容
const isShowAll = ref<boolean>(false);

// 修改状态
const handleChang = (type: string) => {
  switch (type) {
    case "arrow":
      isFoldArrow.value = !isFoldArrow.value;
      break;
    case "word":
      isFoldWord.value = !isFoldWord.value;
      break;
    case "wordIcon":
      isFoldAll.value = !isFoldAll.value;
      break;
    case "all":
      isShowAll.value = !isShowAll.value;
      break;
    default:
      break;
  }
};
</script>
<template>
  <div>
    <div class="flex">
      示例: 展开和收起组件 :
      <IKExpandCollapse
        showType="word"
        :is-expand="isShowAll"
        @handleChangStatus="handleChang('all')"
      />
    </div>

    <div v-if="isShowAll" class="flex">
      <p>图标类型 ：</p>
      <IKExpandCollapse
        showType="icon"
        :is-expand="isFoldArrow"
        @handleChangStatus="handleChang('arrow')"
      /> &nbsp;&nbsp;
      <p>文字类型 ：</p>
      <IKExpandCollapse
        showType="word"
        :is-expand="isFoldWord"
        @handleChangStatus="handleChang('word')"
      />
      &nbsp;&nbsp;
      <p>图文类型 ：</p>
      <IKExpandCollapse
        showType="wordIcon"
        :is-expand="isFoldAll"
        @handleChangStatus="handleChang('wordIcon')"
      />
      &nbsp;&nbsp;
    </div>
    <p v-if="isFoldArrow || isFoldWord || isFoldAll">我是展开的内容面板</p>

  </div>
</template>
<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
}
</style>