vue-ant-patterns/es/d-layout/Sider.js

vue-ant-patterns

import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { getOptionProps } from 'ant-design-vue/es/_util/props-util';
import debounceHandler from '../_utils/debounceHandler';
// import { Button } from 'ant-design-vue';
import cx from 'classnames';
// import Icon from '../d-icon';
import Container from '../d-container';
import IconButton from '../d-icon-button';

export default {
  name: 'DSider',
  props: {
    prefixCls: PropTypes.string.def('depot-sider'),
    // 是否可收起
    collapsible: PropTypes.bool.def(true),
    // 当前收起状态
    collapsed: PropTypes.bool.def(false),
    direction: PropTypes.string.def('left'),
    vLine: PropTypes.bool.def(false),
    gutter: PropTypes.number.def(16)
  },

  data: function data() {
    var props = getOptionProps(this);
    var state = {
      sCollapsed: false,
      collapseIng: false
    };

    if ('collapsed' in props) {
      state.sCollapsed = props.collapsed;
    }

    return state;
  },

  watch: {
    collapsed: function collapsed(v) {
      this.sCollapsed = v;
    }
  },
  created: function created() {
    this.debounceClickHandler = debounceHandler(this.clickHandler);
  },
  mounted: function mounted() {},

  methods: {
    clickHandler: function clickHandler() {
      this.sCollapsed = !this.sCollapsed;
      this.$emit('onCollapse', this.sCollapsed);
    },
    renderButton: function renderButton() {
      var h = this.$createElement;
      var _$props = this.$props,
          direction = _$props.direction,
          gutter = _$props.gutter;
      var sCollapsed = this.sCollapsed;

      var buttonProps = {
        props: {
          icon: sCollapsed ? 'menu-unfold' : 'menu-fold',
          size: 'small'
        },
        'class': {
          'sider-collapse-button': 1
        },
        on: {
          click: this.debounceClickHandler
        }
      };
      return h(IconButton, buttonProps);
    }
  },
  render: function render() {
    var _cx;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        collapsible = this.collapsible,
        direction = this.direction,
        vLine = this.vLine,
        padding = this.padding,
        $slots = this.$slots;

    var cls = cx((_cx = {}, _defineProperty(_cx, '' + prefixCls, 1), _defineProperty(_cx, 'v-line', vLine), _defineProperty(_cx, prefixCls + '-' + direction, 1), _cx));
    var divProps = {
      'class': cls
    };
    var innerProps = {
      'class': prefixCls + '-inner',
      props: {
        // grow: true,
      }
    };
    var collapseButton = this.renderButton();
    return h(
      Container,
      _mergeJSXProps([divProps, { ref: 'sideroot' }]),
      [h(
        Container,
        innerProps,
        [$slots['default'], collapsible ? collapseButton : null]
      )]
    );
  }
};