ant-design-vue/lib/vc-drawer/demo/multiple.js

An enterprise-class UI design language and Vue-based implementation

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _index = require('../src/index');

var _index2 = _interopRequireDefault(_index);

var _index3 = require('../../menu/index');

var _index4 = _interopRequireDefault(_index3);

var _index5 = require('../../icon/index');

var _index6 = _interopRequireDefault(_index5);

var _index7 = require('../../button/index');

var _index8 = _interopRequireDefault(_index7);

require('../assets/index.less');

require('../../menu/style/index');

require('../../icon/style/index');

require('../../button/style/index');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var SubMenu = _index4['default'].SubMenu;
var MenuItemGroup = _index4['default'].ItemGroup;

exports['default'] = {
  data: function data() {
    return {
      open: false,
      openChild: false,
      openChildren: false
    };
  },

  methods: {
    onClick: function onClick() {
      this.open = !this.open;
    },
    onChildClick: function onChildClick() {
      this.openChild = !this.openChild;
    },
    onChildrenClick: function onChildrenClick() {
      this.openChildren = !this.openChildren;
    },
    getLevelMove: function getLevelMove(e) {
      var target = e.target;
      if (target.className === 'drawer1') {
        return [200, 100];
      }
      return 100;
    }
  },
  render: function render() {
    var h = arguments[0];

    return h('div', [h(
      'div',
      {
        style: {
          width: '100%', height: 667, background: '#fff000',
          color: '#fff', textAlign: 'center', lineHeight: '667px'
        }
      },
      [h(
        _index8['default'],
        {
          on: {
            'click': this.onClick
          }
        },
        ['\u6253\u5F00\u62BD\u5C49']
      )]
    ), h(
      _index2['default'],
      {
        attrs: {
          width: '20vw',
          handler: false,
          open: this.open,

          wrapperClassName: 'drawer1',
          placement: 'right'
        },
        on: {
          'maskClick': this.onClick
        }
      },
      [h('div', [h(
        _index8['default'],
        {
          on: {
            'click': this.onChildClick
          }
        },
        ['\u6253\u5F00\u5B50\u7EA7']
      ), h(
        _index2['default'],
        {
          attrs: {
            handler: false,
            open: this.openChild,

            wrapperClassName: 'drawer2',
            level: '.drawer1',
            placement: 'right',
            levelMove: 100
          },
          on: {
            'maskClick': this.onChildClick
          }
        },
        [h(
          'div',
          { style: { width: 200 } },
          ['\u4E8C\u7EA7\u62BD\u5C49', h(
            _index8['default'],
            {
              on: {
                'click': this.onChildrenClick
              }
            },
            ['\u6253\u5F00\u5B50\u7EA7']
          ), h(
            _index2['default'],
            {
              attrs: {
                handler: false,
                open: this.openChildren,

                level: ['.drawer1', '.drawer2'],
                placement: 'right',
                levelMove: this.getLevelMove
              },
              on: {
                'maskClick': this.onChildrenClick
              }
            },
            [h(
              'div',
              { style: { width: 200 } },
              ['\u4E09\u7EA7\u62BD\u5C49']
            )]
          )]
        )]
      )])]
    )]);
  }
};
module.exports = exports['default'];