common-vue-tools v1.0.2

common-vue-tools

简介

不依赖其他ui框架的components
目前组件包括common-drag-layout

引入方式

import CommonVueTools from 'common-vue-tools'
import 'common-vue-tools/lib/common-vue-tools.css'
Vue.use(CommonVueTools)

CommonDragLayout

  <common-drag-layout
    dragBarWidth="10px"
    left-width="800px"
    min-left-width="100"
    min-right-width="150"
    leftLocalStorageKey="left-width"
    rightLocalStorageKey="right-width"
  >
    <!-- 左侧插槽 -->
    <div class="border" slot="left" style="height: 100%; overflow: auto">
      <p>left content</p>
    </div>
    <!-- 左侧dragbar插槽 -->
    <div
      slot="left-drag"
      style="height: 100%; background-color: #f5f5f5"
    ></div>
    <!-- 默认插槽 -->
    <div class="border">
      <p>default content</p>
    </div>
    <!-- 右侧dragbar插槽 -->
    <div
      slot="right-drag"
      style="height: 100%; background-color: #f5f5f5"
    ></div>
    <!-- 右侧插槽 -->
    <div class="border" slot="right" style="height: 100%">
      <p>right content</p>
    </div>
  </common-drag-layout>

 props: {
    // 拖拽区域宽度
    dragBarWidth: {
      type: [String, Number],
      default: null,
    },
    // 左侧区域宽度 默认200px
    leftWidth: {
      type: [String, Number],
      default: "200px",
    },
    // 右侧区域宽度 默认200px
    rightWidth: {
      type: [String, Number],
      default: "200px",
    },
    // 左侧区域最小宽度 默认50px
    minLeftWidth: {
      type: [String, Number],
      default: 50,
    },
    // 右侧区域最小宽度 默认50px
    minRightWidth: {
      type: [String, Number],
      default: 50,
    },
    // 左侧区域本地存储key 确保每个引用组件时唯一 否则会干扰
    leftLocalStorageKey: {
      type: String,
      default: null,
    },
    // 右侧区域本地存储key 确保每个引用组件时唯一 否则会干扰
    rightLocalStorageKey: {
      type: String,
      default: null,
    },
  },