tx-drawer v0.0.3

tx-drawer

有别于常见的显示在视图上层的 drawer，该 drawer 会占用视图空间。

安装说明

npm install

# 必须使用vuex
npm install vuex

npm run dev

npm run build

API

drawer.drawer-item

使用说明

开始之前

// main.js
import txDrawer from "tx-drawer";
// 你项目的store
import store from "./store";
/*
 txDrawer内部的store会注册到项目的store;
 txDrawer的store名为drawer,使用了命名空间
*/
Vue.use(txDrawer, { store });

描述

drawer-item 区域包含区域和按钮。基本区域分为左、中、右、上、下，其中左、右、上、下区域根据实际场景做省略。drawer-item 支持嵌套。

<drawer>
	<drawer-item item-pos="left" />
	<drawer-item item-pos="center">
        <!-- 嵌套drawer-item -->
        <drawer-item item-pos="center" />
        <drawer-item item-pos="bottom" />
	</drawer-item>
	<drawer-item item-pos="right" />
</drawer>

使用自定义的折叠按钮

<drawer>
    <drawer-item>
    	<!--
         自定义的折叠按钮；
         props.fold == true表示区域折叠状态，反之为展开状态
    	-->
    	<template v-slot:button="props">
      </template>
		  <!-- 显示区域 -->
      <template #content>
      </template>
    </drawer-item>
</drawer>

示例

<template>
  <div class="drawer-main">
    <drawer ref="drawerRef">
      <!-- left-area -->
      <drawer-item item-pos="left" :width="itemWidth.left" :visible="false">
        <!-- 不使用默认的折叠按钮 -->
        <template v-slot:button="props">
          <div class="fold-btn1 my-column-btn">
            <a-icon :type="props.fold ? 'vertical-right' : 'vertical-left'" />
          </div>
        </template>
        <template #content>
          <left-area />
        </template>
      </drawer-item>
      <!-- center-area -->
      <! -- 嵌套drawer-item -->
      <drawer-item item-pos="center">
        <drawer-item item-pos="center"></drawer-item>
        <drawer-item item-pos="bottom" :height="200">
          <template v-slot:button="props">
            <div class="fold-btn1 my-row-btn">
              <a-icon :type="props.fold ? 'down' : 'up'" />
            </div>
          </template>
          <template #content>
            <bottom-area />
          </template>
        </drawer-item>
      </drawer-item>
      <!-- right-area -->
      <drawer-item item-pos="right" :width="itemWidth.right">
        <template v-slot:button="props">
          <div class="fold-btn1 my-column-btn">
            <a-icon :type="props.fold ? 'vertical-left' : 'vertical-right'" />
          </div>
        </template>
        <template #content>
          <left-area />
        </template>
      </drawer-item>
    </drawer>
  </div>
</template>

<script>
import Drawer from "./components/drawer";
import DrawerItem from "./components/drawer-item";
import LeftArea from "./components/left-area";
import BottomArea from "./components/bottom-area";

export default {
  name: "app",
  components: {
    Drawer,
    DrawerItem,
    LeftArea,
    BottomArea
  },
  data() {
    return {
      itemWidth: {
        right: 200,
        left: 300
      }
    };
  }
};
</script>

<style lang="less" scoped>
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}
.drawer-main {
  width: 100%;
  height: 100%;
  position: absolute;
  /deep/ .components-layout-demo-top-side-2 {
    height: 100%;
  }
  .fold-btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white !important;
    font-size: 15px;
  }
  .my-column-btn {
    width: 10px;
    height: 100%;
  }
  .my-row-btn {
    width: 100%;
    height: 10px;
  }
}
</style>