double-ui-vue/es/sidebar-custom/index.js

基于vue框架的ui库

import { openBlock, createElementBlock, createElementVNode, defineComponent, reactive, getCurrentInstance, watch, onMounted, onBeforeUnmount, createVNode, Fragment, withDirectives, vShow } from "vue";
var style = "";
const _hoisted_1 = {
  viewBox: "0 0 1024 1024",
  xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
  d: "M902.5 164.1 554.6 512l347.9 347.9-67.5 67.5L419.7 512 835 96.6z",
  class: "svg-fill-grey-500"
}, null, -1);
const _hoisted_3 = /* @__PURE__ */ createElementVNode("path", {
  d: "M604.3 164.1 256.4 512l347.9 347.9-67.4 67.5L121.5 512 536.9 96.6z",
  class: "svg-fill-grey-500"
}, null, -1);
const _hoisted_4 = [
  _hoisted_2,
  _hoisted_3
];
function render(_ctx, _cache) {
  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
}
var ArrowDoubleLeft = { render };
const SidebarCustom = defineComponent({
  name: "SidebarCustom",
  props: {
    width: {
      type: [String, Number],
      default: ""
    },
    show: {
      type: Boolean,
      default: true
    },
    changeSize: {
      type: Boolean,
      default: true
    },
    openClose: {
      type: Boolean,
      default: true
    },
    onChange: {
      type: Function,
      default: () => {
      }
    }
  },
  setup(props, {
    emit,
    slots
  }) {
    const state = reactive({
      windowWidth: 0,
      minWidth: 0,
      maxWidth: 580,
      lineStatus: false,
      leftShow: true,
      leftWidth: 0,
      leftWidthHistory: 0,
      pointX: 0,
      left: 0
    });
    const {
      proxy
    } = getCurrentInstance();
    watch(() => props.show, (n, o) => {
      if (n === o)
        return;
      if (n)
        state.leftWidth = Number(props.width || state.leftWidthHistory);
      else
        state.leftWidth = 0;
    });
    const getWindowWidth = () => {
      const {
        show,
        width
      } = props;
      const {
        leftWidth: lw,
        leftWidthHistory: lwh,
        maxWidth,
        leftShow
      } = state;
      if (lw === maxWidth)
        return;
      const windowWidth = window.innerWidth;
      state.windowWidth = windowWidth;
      if (width) {
        const w = Number(width);
        if (leftShow)
          state.leftWidth = w;
        state.leftWidthHistory = w;
        state.minWidth = w;
      } else {
        const leftWidth = windowWidth >= 1920 ? 280 : 224;
        if ((lwh && lw || !lwh && !lw) && show)
          state.leftWidth = leftWidth;
        state.leftWidthHistory = leftWidth;
        state.minWidth = leftWidth;
      }
    };
    onMounted(() => {
      getWindowWidth();
      window.addEventListener("resize", getWindowWidth, false);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", getWindowWidth);
    });
    const lineDown = (e) => {
      if (!props.changeSize)
        return;
      const {
        left
      } = proxy.$el.getBoundingClientRect();
      state.left = Math.ceil(left);
      state.pointX = e.x;
    };
    const lineMove = (e) => {
      if (!state.pointX)
        return;
      const {
        x
      } = e;
      const {
        minWidth,
        maxWidth,
        left
      } = state;
      if (x - left <= minWidth)
        state.pointX = minWidth + left;
      else if (x - left >= maxWidth)
        state.pointX = maxWidth + left;
      else
        state.pointX = x;
      state.leftWidth = state.pointX - left;
    };
    const lineUp = () => {
      if (!state.pointX)
        return;
      const {
        pointX,
        left
      } = state;
      state.leftWidth = pointX - left;
      state.leftWidthHistory = pointX - left;
      state.pointX = 0;
      emit("change", state.leftWidth, state.leftShow);
    };
    const closeLeft = () => {
      if (state.leftWidth) {
        state.leftWidth = 0;
        setTimeout(() => {
          state.leftShow = false;
        }, 300);
      } else {
        state.leftShow = true;
        setTimeout(() => {
          state.leftWidth = state.leftWidthHistory;
        });
      }
      setTimeout(() => {
        emit("change", state.leftWidth, state.leftShow);
      }, 300);
    };
    return () => {
      const {
        width,
        openClose,
        changeSize
      } = props;
      const {
        pointX,
        left,
        leftWidth,
        windowWidth,
        leftShow
      } = state;
      return createVNode("div", {
        "class": ["d-sidebar-custom", pointX && "d-sidebar-custom-col-resize", windowWidth >= 1920 ? "d-sidebar-custom-large" : "d-sidebar-custom-normal"],
        "onMousemove": lineMove,
        "onMouseup": lineUp
      }, [createVNode(Fragment, null, [pointX > 0 && createVNode("div", {
        "class": "d-sidebar-custom-line",
        "style": {
          left: `${pointX - left - 1}px`
        }
      }, null)]), createVNode(Fragment, null, [width && createVNode("div", {
        "class": {
          "d-sidebar-custom-bar": true,
          "d-sidebar-custom-bar-change-size": changeSize && leftWidth
        },
        "style": {
          left: `${leftWidth - 2}px`
        },
        "onMousedown": lineDown
      }, null)]), createVNode(Fragment, null, [openClose && createVNode("div", {
        "class": ["d-sidebar-custom-btn", leftWidth ? "d-sidebar-custom-btn-normal" : "d-sidebar-custom-btn-rotate"],
        "style": {
          left: `${leftWidth || (windowWidth >= 1920 ? 22 : 20)}px`
        },
        "onClick": closeLeft
      }, [createVNode(ArrowDoubleLeft, null, null)])]), withDirectives(createVNode("div", {
        "class": "d-sidebar-left",
        "style": {
          width: `${leftWidth}px`
        }
      }, [slots.left()]), [[vShow, leftShow]]), createVNode("div", {
        "class": "d-sidebar-right",
        "style": {
          width: `calc(100% - ${leftWidth}px)`
        }
      }, [slots.right()])]);
    };
  }
});
export { SidebarCustom as default };