rose-layout v0.1.60

VUE3 版本的 Layout 布局 RoseLayout

开箱即用的 layout 布局，分 bg,header,left,content,right,contentTop,contentBox,contentBottom 部分。 headerCard,leftCard,rightCard,footerCard.拖拽卡片容器

安装使用

npm install rose-layout

在 main.ts 中使用 import RoseLayout,{ useConfigMenu } from 'rose-layout' import 'rose-layout/style.css'

每一部分都使用具名插槽定义,其他使用结构

<RoseLayout>
  <template #bg>
    <div class="w-full h-full">bg</div>
  </template>

  <template #header>
    <div class="w-full h-full">header</div>
  </template>
  <template #headerCard>
    <div class="w-full h-full">headerCard</div>
  </template>

  <template #left>
    <div class="w-full h-full">left</div>
  </template>
  <template #leftCard>
    <div class="w-full h-full">leftCard</div>
  </template>

  <template #contentTop>
    <div class="w-full h-full">contentTop</div>
  </template>

  <template #contentBox>
    <div class="w-full h-full">contentBox</div>
  </template>

  <template #contentBottom>
    <div class="w-full h-full">contentBottom</div>
  </template>

  <template #right>
    <div class="w-full h-full">right</div>
  </template>
  <template #rightCard>
    <div class="w-full h-full">rightCard</div>
  </template>

  <template #footer>
    <div class="w-full h-full">footer</div>
  </template>
  <template #footerCard>
    <div class="w-full h-full">footerCard</div>
  </template>
</RoseLayout>

animate 可以自定动画,使用 animate 的动画库,后手写 vue 的 transition 的动画

<RoseLayoutPage
  v-model:show="isShowPage"
  v-model:fullscreen="isFullscreen"
  :animate="2"
  :time="0.3"
  transition="0.3s cubic-bezier(0, 0, 0.2, 1)"
  class=" bg-white"
>
  插槽内容,animate可以自定动画,使用animate的动画库,后手写vue的transition的动画
</RoseLayoutPage>

快捷键,相应的快捷显示隐藏

shortcutsKey: 'ControlLeft+AltLeft+Backspace' // bg (背景)
shortcutsKey: 'ControlLeft+AltLeft+ArrowUp' // header (头部)
shortcutsKey: 'ControlLeft+AltLeft+ArrowDown' // footer (底部)
shortcutsKey: 'ControlLeft+AltLeft+ArrowLeft' // left (左)
shortcutsKey: 'ControlLeft+AltLeft+ArrowRight' // right (右)
shortcutsKey: 'ControlLeft+AltLeft+ControlRight' // content (中间)
shortcutsKey: 'ShiftLeft+ArrowUp' // contentTop (中间上)
shortcutsKey: 'ShiftLeft+ArrowRight' // contentBox (中间中)
shortcutsKey: 'ShiftLeft+ArrowDown' // contentBottom (中间下)
shortcutsKey: 'ControlLeft+AltLeft+Enter' // setting (设置)*