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

rollup 打包vue@2.7组件库框架

/**
 * @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 { h } from 'vue';

const BaseDrawer = function(Vue) {
  return function(options = {}) {
    // const that = this;
    let contentNode = null;
    const optionsKey = _keys(_omit(options, ['$route', '$router']));
    const VueModal = Vue.extend({
      provide() {
        return {
          getDrawer: this
        };
      },
      // router: that.$router,
      // store: that.$store,
      router: options.$router, // vue2.7版本，传递到弹框的详情组件中使用：const { $route, $router } = getCurrentInstance().proxy;
      route: options.$route,
      props: optionsKey,
      render(h) {
        let customClass = 'base-el-drawer';
        if (
          _has(this.$props, 'customClass') ||
          _has(this.$props, 'custom-class')
        ) {
          customClass += ` ${_get(this.$props, 'customClass', '')} ${_get(
            this.$props,
            'custom-class',
            ''
          )}`;
        }
        contentNode = h();
        if (_has(options.component, 'render')) {
          contentNode = h(options.component);
        } else {
          contentNode = options.component();
        }
        return h(
          'el-drawer',
          {
            class: { 'base-drawer': true, [options.ctCls]: options.ctCls },
            props: _assign(
              {
                destroyOnClose: _get(options, 'destroyOnClose', true),
                visible: this.visible,
                direction: _get(options, 'direction', 'rtl'),
                customClass
              },
              _omit(this.$props, ['listeners', 'customClass']),
              {}
            ),
            ref: `${this._uid}-base-drawer`,
            on: {
              open: () => {
                if (_has(options, 'listeners.open')) {
                  options.listeners.open();
                }
              },
              opened: () => {
                if (_has(options, 'listeners.opened')) {
                  options.listeners.opened();
                }
              },
              close: () => {
                this.visible = false;
                if (_has(options, 'listeners.close')) {
                  options.listeners.close();
                }
              },
              closed: () => {
                if (options.isDestroy) {
                  this.$destroy();
                  if (_has(this, '$el')) {
                    this.$el.remove();
                  }
                } else if (_has(options, 'listeners.closed')) {
                  options.listeners.closed();
                }
              }
            }
          },
          [contentNode, h('template', { slot: 'title' }, [this.appendTitle()])]
        );
      }
    });
    const instance = new VueModal({
      propsData: options,
      data() {
        return {
          visible: false
          // curTitle: _get(options, 'title', '详情')
        };
      },
      created() {
        this.$nextTick(() => {
          document.body.appendChild(instance.$mount().$el);
        });
      },
      methods: {
        // 详情组件引用
        getContentNode() {
          return contentNode.componentInstance;
        },
        /**
         * @desc 设置标题
         * @param {String} title - 标题
         */
        // setTitle(title) {
        //   this.curTitle = title;
        // },
        // 打开
        open() {
          setTimeout(() => {
            this.visible = true;
          }, 0);
        },
        // 关闭（隐藏-未销毁实例）
        close() {
          // this.visible = false;
          setTimeout(() => {
            // this.closeDrawer();
            this.visible = false;
          }, 0);
        },
        // 关闭（销毁实例）
        // closeDrawer() {
        //   this.$refs[`${this._uid}-base-drawer`].closeDrawer();
        // },
        // Drawer 标题区的内容this.$props.slotNode.title(this.$createElement)
        appendTitle() {
          return _has(this.$props, 'slotNode.title')
            ? [this.$props.slotNode.title(h)]
            : [];
        }
      }
    });
    /* if (_has(options, 'container') && !_isNil(options.container)) {
       options.container.appendChild(instance.$mount().$el);
     } */
    return instance;
  };
};
export { BaseDrawer };