shu-c-view/packages/drawer/index.js

rollup 打包vue组件库框架

/**
 * @desc 抽屉
 */
import _assign from 'lodash/assign';
import _omit from 'lodash/omit';
import _keys from 'lodash/keys';
import _has from 'lodash/has';
import _get from 'lodash/get';
import _isFunction from 'lodash/isFunction';
import Render from '../dialog/render.vue';

const BaseDrawer = function(Vue) {
  return function(options = {}) {
    const that = this;
    const optionsKey = _keys(
      _omit(options, [
        '$route',
        '$router',
        'slotNode',
        'component',
        'listeners',
        'ctCls',
        'isDestroy',
        'title',
        'customClass',
        'visible',
        'appendToBody',
        'modalAppendToBody',
        'destroyOnClose'
      ])
    );
    const h = this.$createElement;
    const VueModal = Vue.extend({
      provide() {
        return {
          getDrawer: this
        };
      },
      router: that.$router,
      store: that.$store,
      props: optionsKey,
      data() {
        return {
          visible: false,
          curTitle: options.title
        };
      },
      methods: {
        // Drawer 标题区的内容options.slotNode.title(this.$createElement)
        appendTitle(h) {
          return _has(options, 'slotNode.title')
            ? [options.slotNode.title(h)]
            : [];
        },
        setTitle(text) {
          this.curTitle = text;
        }
      },
      render(h) {
        return h(
          'el-drawer',
          {
            class: { 'base-drawer': true, [options.ctCls]: options.ctCls },
            props: _assign(
              {
                visible: this.visible,
                customClass: this.curCustomClass,
                title: this.curTitle,
                destroyOnClose: true,
                appendToBody: false,
                modalAppendToBody: true
              },
              this.$props
            ),
            on: {
              'update:visible': status => {
                this.visible = status;
              },
              open: () => {
                if (_has(options, 'listeners.open')) {
                  options.listeners.open();
                }
              },
              opened: () => {
                if (_has(options, 'listeners.opened')) {
                  options.listeners.opened();
                }
              },
              close: () => {
                if (_has(options, 'listeners.close')) {
                  options.listeners.close();
                }
              },
              closed: () => {
                if (_has(options, 'listeners.closed')) {
                  options.listeners.closed();
                }
                this.destroyedDialog();
              }
            }
          },
          [this.comFun, h('template', { slot: 'title' }, [this.appendTitle(h)])]
        );
      }
    });
    const instance = new VueModal({
      propsData: options,
      data() {
        this.readyPromise = null;
        this.readyPromiseResolve = null;
        this.curCustomClass = 'base-el-drawer';
        this.comFun = null;
        this.isDestroy = true;
        return {};
      },
      created() {
        if (_isFunction(options.component)) {
          this.comFun = h(Render, {}, [options.component]);
        }
        if (_has(options.component, 'render')) {
          this.comFun = h(Render, {}, [h(options.component)]);
        }
        if (_has(options, 'customClass')) {
          this.curCustomClass += ` ${_get(options, 'customClass', '')}`;
        }
        this.readyPromise = new Promise(resolve => {
          this.readyPromiseResolve = resolve;
        });
        this.$nextTick(() => {
          document.body.appendChild(instance.$mount().$el);
          this.readyPromiseResolve();
        });
      },
      beforeDestroy() {
        this.readyPromise = undefined;
        this.readyPromiseResolve = undefined;
        this.comFun = undefined;
      },
      methods: {
        ready() {
          return this.readyPromise;
        },
        // 详情组件引用
        getContentNode() {
          return this.comFun.componentInstance.$children[0];
        },
        // 打开
        open() {
          this.ready()
            .then(() => {
              this.visible = true;
              return true;
            })
            .catch(() => {
              //
            });
        },
        // 关闭
        close() {
          this.$children[0].handleClose();
        },
        // 关闭
        closeDrawer() {
          this.close();
        },
        // 销毁实例
        destroyedDialog() {
          setTimeout(() => {
            instance.$destroy();
            if (_has(instance, '$el')) {
              instance.$el.remove();
            }
          }, 0);
        }
      }
    });
    /* if (_has(options, 'container') && !_isNil(options.container)) {
      options.container.appendChild(instance.$mount().$el);
     } */
    return instance;
  };
};
export { BaseDrawer };