vxe-pc-ui 3.16.0 → 3.16.2

package/lib/button/src/button.js

@@ -0,0 +1,874 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _comp = require("../../ui/src/comp");
+var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+var _vn = require("../../ui/src/vn");
+var _log = require("../../ui/src/log");
+var _tooltip = _interopRequireDefault(require("../../tooltip"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _createComponentLog = (0, _log.createComponentLog)('button'),
+  warnLog = _createComponentLog.warnLog;
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeButton',
+  mixins: [_ui.globalMixins.sizeMixin, _ui.globalMixins.permissionMixin],
+  props: {
+    /**
+     * 按钮类型
+     */
+    type: String,
+    mode: String,
+    className: [String, Function],
+    popupClassName: [String, Function],
+    /**
+     * 按钮尺寸
+     */
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().button.size || (0, _ui.getConfig)().size;
+      }
+    },
+    zIndex: Number,
+    /**
+     * 用来标识这一项
+     */
+    name: [String, Number],
+    routerLink: Object,
+    /**
+     * 权限码
+     */
+    permissionCode: [String, Number],
+    /**
+     * 按钮内容
+     */
+    content: String,
+    /**
+     * 固定显示下拉面板的方向
+     */
+    placement: String,
+    /**
+     * 按钮状态
+     */
+    status: String,
+    /**
+     * 标题
+     */
+    title: String,
+    shadow: Boolean,
+    /**
+     * 按钮的前缀图标，属于 prefix-icon 的简写
+     */
+    icon: String,
+    iconRender: Object,
+    /**
+     * 按钮的前缀图标
+     */
+    prefixIcon: String,
+    prefixRender: Object,
+    /**
+     * 按钮的后缀图标
+     */
+    suffixIcon: String,
+    suffixRender: Object,
+    /**
+     * 圆角边框
+     */
+    round: Boolean,
+    /**
+     * 圆角按钮
+     */
+    circle: Boolean,
+    /**
+     * 是否禁用
+     */
+    disabled: Boolean,
+    /**
+     * 是否加载中
+     */
+    loading: Boolean,
+    trigger: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().button.trigger;
+      }
+    },
+    align: String,
+    prefixTooltip: Object,
+    suffixTooltip: Object,
+    options: Array,
+    showDropdownIcon: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().button.showDropdownIcon;
+      }
+    },
+    /**
+     * 在下拉面板关闭时销毁内容
+     */
+    destroyOnClose: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().button.destroyOnClose;
+      }
+    },
+    popupConfig: Object,
+    /**
+     * 是否将弹框容器插入于 body 内
+     */
+    transfer: {
+      type: Boolean,
+      default: null
+    }
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeDrawer: {
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeTree: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    },
+    $xeButtonGroup: {
+      default: null
+    }
+  },
+  data: function data() {
+    var reactData = {
+      initialized: false,
+      visiblePanel: false,
+      isAniVisible: false,
+      isActivated: false,
+      panelIndex: 0,
+      panelStyle: {},
+      panelPlacement: ''
+    };
+    var internalData = {
+      showTime: undefined
+    };
+    return {
+      xID: _xeUtils.default.uniqueId(),
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var $xeTable = $xeButton.$xeTable;
+      var $xeTree = $xeButton.$xeTree;
+      var $xeModal = $xeButton.$xeModal;
+      var $xeDrawer = $xeButton.$xeDrawer;
+      var $xeForm = $xeButton.$xeForm;
+      var transfer = props.transfer;
+      var popupOpts = $xeButton.computePopupOpts;
+      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer;
+      }
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().button.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeTree || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeBtnDisabled: function computeBtnDisabled() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var disabled = props.disabled;
+      var permissionInfo = $xeButton.computePermissionInfo;
+      return disabled || permissionInfo.disabled;
+    },
+    computeIsFormBtn: function computeIsFormBtn() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var type = props.type;
+      if (type) {
+        return ['submit', 'reset', 'button'].indexOf(type) > -1;
+      }
+      return false;
+    },
+    computeBtnMode: function computeBtnMode() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var type = props.type,
+        mode = props.mode;
+      var $xeButtonGroup = $xeButton.$xeButtonGroup;
+      if (mode === 'text' || type === 'text' || $xeButtonGroup && $xeButtonGroup.mode === 'text') {
+        return 'text';
+      }
+      return 'button';
+    },
+    computeBtnStatus: function computeBtnStatus() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var status = props.status;
+      var $xeButtonGroup = $xeButton.$xeButtonGroup;
+      if (status) {
+        return status;
+      }
+      if ($xeButtonGroup) {
+        return $xeButtonGroup.status;
+      }
+      return '';
+    },
+    computeBtnRound: function computeBtnRound() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var round = props.round;
+      var $xeButtonGroup = $xeButton.$xeButtonGroup;
+      if (round) {
+        return round;
+      }
+      if ($xeButtonGroup) {
+        return $xeButtonGroup.round;
+      }
+      return false;
+    },
+    computeBtnAlign: function computeBtnAlign() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var align = props.align;
+      var $xeButtonGroup = $xeButton.$xeButtonGroup;
+      if (align) {
+        return align;
+      }
+      if ($xeButtonGroup) {
+        return $xeButtonGroup.align;
+      }
+      return false;
+    },
+    computeBtnCircle: function computeBtnCircle() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var circle = props.circle;
+      var $xeButtonGroup = $xeButton.$xeButtonGroup;
+      if (circle) {
+        return circle;
+      }
+      if ($xeButtonGroup) {
+        return $xeButtonGroup.circle;
+      }
+      return false;
+    },
+    computeDownBtnList: function computeDownBtnList() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var options = props.options;
+      if (options) {
+        return options.filter(function (item) {
+          var permissionCode = item.permissionCode;
+          return !permissionCode || _ui.permission.checkVisible(permissionCode);
+        });
+      }
+      return [];
+    },
+    computePopupOpts: function computePopupOpts() {
+      var $xeButton = this;
+      var props = $xeButton;
+      return Object.assign({}, (0, _ui.getConfig)().button.popupConfig, props.popupConfig);
+    },
+    computePrefixTipOpts: function computePrefixTipOpts() {
+      var $xeButton = this;
+      var props = $xeButton;
+      return Object.assign({}, (0, _ui.getConfig)().button.prefixTooltip, props.prefixTooltip);
+    },
+    computeSuffixTipOpts: function computeSuffixTipOpts() {
+      var $xeButton = this;
+      var props = $xeButton;
+      return Object.assign({}, (0, _ui.getConfig)().button.suffixTooltip, props.suffixTooltip);
+    }
+  }),
+  methods: {
+    //
+    // methods
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeButton = this;
+      $xeButton.$emit((0, _vn.getEventCaseName)($xeButton, type), (0, _ui.createEvent)(evnt, {
+        $button: $xeButton
+      }, params));
+    },
+    openPanel: function openPanel() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var reactData = $xeButton.reactData;
+      var internalData = $xeButton.internalData;
+      var trigger = props.trigger;
+      var btnTransfer = $xeButton.computeBtnTransfer;
+      var panelElem = $xeButton.$refs.refBtnPanel;
+      if (panelElem) {
+        panelElem.dataset.active = 'Y';
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+          if (btnTransfer) {
+            document.body.appendChild(panelElem);
+          }
+        }
+        internalData.showTime = setTimeout(function () {
+          if (panelElem.dataset.active === 'Y') {
+            $xeButton.mouseenterDropdownEvent();
+          } else {
+            reactData.isAniVisible = false;
+          }
+        }, trigger === 'click' ? 50 : 250);
+      }
+      return $xeButton.$nextTick();
+    },
+    closePanel: function closePanel() {
+      var $xeButton = this;
+      return $xeButton.hidePanel();
+    },
+    hidePanel: function hidePanel() {
+      var $xeButton = this;
+      var reactData = $xeButton.reactData;
+      var internalData = $xeButton.internalData;
+      var panelElem = $xeButton.$refs.refBtnPanel;
+      clearTimeout(internalData.showTime);
+      if (panelElem) {
+        panelElem.dataset.active = 'N';
+        setTimeout(function () {
+          if (panelElem.dataset.active !== 'Y') {
+            reactData.visiblePanel = false;
+            setTimeout(function () {
+              if (panelElem.dataset.active !== 'Y') {
+                reactData.isAniVisible = false;
+              }
+            }, 350);
+          }
+        }, 100);
+      } else {
+        reactData.isAniVisible = false;
+        reactData.visiblePanel = false;
+      }
+      return $xeButton.$nextTick();
+    },
+    focus: function focus() {
+      var $xeButton = this;
+      var btnElem = $xeButton.$refs.refButton;
+      if (btnElem) {
+        btnElem.focus();
+      }
+      return $xeButton.$nextTick();
+    },
+    blur: function blur() {
+      var $xeButton = this;
+      var btnElem = $xeButton.$refs.refButton;
+      if (btnElem) {
+        btnElem.blur();
+      }
+      return $xeButton.$nextTick();
+    },
+    //
+    // privateMethods
+    //
+    updateZindex: function updateZindex() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var reactData = $xeButton.reactData;
+      var popupOpts = $xeButton.computePopupOpts;
+      var customZIndex = popupOpts.zIndex || props.zIndex;
+      if (customZIndex) {
+        reactData.panelIndex = _xeUtils.default.toNumber(customZIndex);
+      } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updatePlacement: function updatePlacement() {
+      var $xeButton = this;
+      var props = $xeButton;
+      var reactData = $xeButton.reactData;
+      var placement = props.placement;
+      var panelIndex = reactData.panelIndex;
+      var targetElem = $xeButton.$refs.refButton;
+      var panelElem = $xeButton.$refs.refBtnPanel;
+      var btnTransfer = $xeButton.computeBtnTransfer;
+      var popupOpts = $xeButton.computePopupOpts;
+      var handleStyle = function handleStyle() {
+        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          defaultPlacement: popupOpts.defaultPlacement,
+          teleportTo: btnTransfer
+        });
+        var panelStyle = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        });
+        reactData.panelStyle = panelStyle;
+        reactData.panelPlacement = ppObj.placement;
+      };
+      handleStyle();
+      return $xeButton.$nextTick().then(handleStyle);
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeButton = this;
+      var props = $xeButton;
+      var $xeButtonGroup = $xeButton.$xeButtonGroup;
+      if ($xeButtonGroup) {
+        $xeButtonGroup.handleClick({
+          name: props.name
+        }, evnt);
+      }
+      $xeButton.dispatchEvent('click', {
+        $event: evnt
+      }, evnt);
+    },
+    downBtnClickEvent: function downBtnClickEvent(params, option) {
+      var $xeButton = this;
+      var $event = params.$event;
+      $xeButton.hidePanel();
+      $xeButton.dispatchEvent('dropdown-click', {
+        name: option.name,
+        option: option
+      }, $event);
+    },
+    mousedownDropdownEvent: function mousedownDropdownEvent(evnt) {
+      var isLeftBtn = evnt.button === 0;
+      if (isLeftBtn) {
+        evnt.stopPropagation();
+      }
+    },
+    clickDropdownEvent: function clickDropdownEvent(evnt) {
+      var $xeButton = this;
+      var reactData = $xeButton.reactData;
+      var dropdownElem = evnt.currentTarget;
+      var panelElem = $xeButton.$refs.refBtnPanel;
+      var _getEventTargetNode = (0, _dom.getEventTargetNode)(evnt, dropdownElem, 'vxe-button'),
+        flag = _getEventTargetNode.flag,
+        targetElem = _getEventTargetNode.targetElem;
+      if (flag) {
+        if (panelElem) {
+          panelElem.dataset.active = 'N';
+        }
+        reactData.visiblePanel = false;
+        setTimeout(function () {
+          if (!panelElem || panelElem.dataset.active !== 'Y') {
+            reactData.isAniVisible = false;
+          }
+        }, 350);
+        $xeButton.dispatchEvent('dropdown-click', {
+          name: targetElem.getAttribute('name'),
+          option: null,
+          $event: evnt
+        }, evnt);
+      }
+    },
+    mouseenterDropdownEvent: function mouseenterDropdownEvent() {
+      var $xeButton = this;
+      var reactData = $xeButton.reactData;
+      var panelElem = $xeButton.$refs.refBtnPanel;
+      if (panelElem) {
+        panelElem.dataset.active = 'Y';
+        reactData.isAniVisible = true;
+        setTimeout(function () {
+          if (panelElem.dataset.active === 'Y') {
+            reactData.visiblePanel = true;
+            $xeButton.updateZindex();
+            $xeButton.updatePlacement();
+            setTimeout(function () {
+              if (reactData.visiblePanel) {
+                $xeButton.updatePlacement();
+              }
+            }, 50);
+          }
+        }, 20);
+      }
+    },
+    mouseenterTargetEvent: function mouseenterTargetEvent(evnt) {
+      var $xeButton = this;
+      var props = $xeButton;
+      var loading = props.loading;
+      var btnDisabled = $xeButton.computeBtnDisabled;
+      if (!(btnDisabled || loading)) {
+        $xeButton.openPanel();
+        $xeButton.mouseenterEvent(evnt);
+      }
+    },
+    mouseleaveTargetEvent: function mouseleaveTargetEvent(evnt) {
+      var $xeButton = this;
+      $xeButton.hidePanel();
+      $xeButton.mouseleaveEvent(evnt);
+    },
+    mouseenterEvent: function mouseenterEvent(evnt) {
+      var $xeButton = this;
+      $xeButton.dispatchEvent('mouseenter', {}, evnt);
+    },
+    mouseleaveEvent: function mouseleaveEvent(evnt) {
+      var $xeButton = this;
+      $xeButton.dispatchEvent('mouseleave', {}, evnt);
+    },
+    contextmenuEvent: function contextmenuEvent(evnt) {
+      var $xeButton = this;
+      $xeButton.dispatchEvent('contextmenu', {}, evnt);
+    },
+    clickTargetEvent: function clickTargetEvent(evnt) {
+      var $xeButton = this;
+      var props = $xeButton;
+      var reactData = $xeButton.reactData;
+      var loading = props.loading;
+      var btnDisabled = $xeButton.computeBtnDisabled;
+      if (!(btnDisabled || loading)) {
+        var trigger = props.trigger;
+        if (trigger === 'click') {
+          if (reactData.visiblePanel) {
+            $xeButton.hidePanel();
+          } else {
+            $xeButton.openPanel();
+          }
+        }
+        $xeButton.clickEvent(evnt);
+      }
+    },
+    mouseleaveDropdownEvent: function mouseleaveDropdownEvent() {
+      var $xeButton = this;
+      $xeButton.hidePanel();
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeButton = this;
+      var reactData = $xeButton.reactData;
+      var panelElem = $xeButton.$refs.refBtnPanel;
+      if (reactData.visiblePanel && !(0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
+        $xeButton.hidePanel();
+      }
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeButton = this;
+      var reactData = $xeButton.reactData;
+      var btnDisabled = $xeButton.computeBtnDisabled;
+      var visiblePanel = reactData.visiblePanel;
+      if (!btnDisabled) {
+        var el = $xeButton.$refs.refElem;
+        var panelElem = $xeButton.$refs.refBtnPanel;
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          $xeButton.hidePanel();
+        }
+      }
+    },
+    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
+      var $xeButton = this;
+      var reactData = $xeButton.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      if (visiblePanel) {
+        $xeButton.updatePlacement();
+      }
+    },
+    //
+    // Render
+    //
+    renderTooltipIcon: function renderTooltipIcon(h, tipOpts, type) {
+      return h(_tooltip.default, {
+        props: {
+          useHtml: _xeUtils.default.isBoolean(tipOpts.useHtml) ? tipOpts.useHtml : tipOpts.useHTML,
+          content: tipOpts.content,
+          enterable: tipOpts.enterable,
+          theme: tipOpts.theme
+        },
+        scopedSlots: {
+          default: function _default() {
+            return h('span', {
+              class: "vxe-button--item vxe-button--tooltip-".concat(type, "-icon")
+            }, [h('i', {
+              class: tipOpts.icon || (0, _ui.getIcon)().BUTTON_TOOLTIP_ICON
+            })]);
+          }
+        }
+      });
+    },
+    renderContent: function renderContent(h) {
+      var $xeButton = this;
+      var props = $xeButton;
+      var slots = $xeButton.$scopedSlots;
+      var content = props.content,
+        suffixIcon = props.suffixIcon,
+        loading = props.loading,
+        prefixTooltip = props.prefixTooltip,
+        suffixTooltip = props.suffixTooltip,
+        suffixRender = props.suffixRender;
+      var prefixIcon = props.prefixIcon || props.icon;
+      var prefixRender = props.prefixRender || props.iconRender;
+      var prefixTipOpts = $xeButton.computePrefixTipOpts;
+      var suffixTipOpts = $xeButton.computeSuffixTipOpts;
+      var prefixIconSlot = slots.prefix || slots.icon;
+      var suffixIconSlot = slots.suffix;
+      var defaultSlot = slots.default;
+      var contVNs = [];
+      if (prefixTooltip) {
+        contVNs.push($xeButton.renderTooltipIcon(h, prefixTipOpts, 'prefix'));
+      }
+      if (loading) {
+        contVNs.push(h('i', {
+          class: ['vxe-button--item vxe-button--loading-icon', (0, _ui.getIcon)().BUTTON_LOADING]
+        }));
+      } else if (prefixIconSlot) {
+        contVNs.push(h('span', {
+          class: 'vxe-button--item vxe-button--custom-prefix-icon'
+        }, prefixIconSlot.call($xeButton, {})));
+      } else if (prefixRender) {
+        var compConf = _ui.renderer.get(prefixRender.name);
+        var pIconMethod = compConf ? compConf.renderButtonPrefix : null;
+        contVNs.push(h('span', {
+          class: ['vxe-button--item vxe-button--custom-prefix-icon']
+        }, pIconMethod ? (0, _vn.getSlotVNs)(pIconMethod.call($xeButton, h, prefixRender, {
+          $button: $xeButton
+        })) : []));
+      } else if (prefixIcon) {
+        contVNs.push(h('i', {
+          class: ['vxe-button--item vxe-button--prefix-icon', prefixIcon]
+        }));
+      }
+      if (defaultSlot) {
+        contVNs.push(h('span', {
+          class: 'vxe-button--item vxe-button--content'
+        }, defaultSlot.call($xeButton, {})));
+      } else if (content) {
+        contVNs.push(h('span', {
+          class: 'vxe-button--item vxe-button--content'
+        }, (0, _utils.getFuncText)(content)));
+      }
+      if (suffixIconSlot) {
+        contVNs.push(h('span', {
+          class: 'vxe-button--item vxe-button--custom-suffix-icon'
+        }, suffixIconSlot.call($xeButton, {})));
+      } else if (suffixRender) {
+        var _compConf = _ui.renderer.get(suffixRender.name);
+        var sIconMethod = _compConf ? _compConf.renderButtonSuffix : null;
+        contVNs.push(h('span', {
+          class: ['vxe-button--item vxe-button--custom-suffix-icon']
+        }, sIconMethod ? (0, _vn.getSlotVNs)(sIconMethod.call($xeButton, h, suffixRender, {
+          $button: $xeButton
+        })) : []));
+      } else if (suffixIcon) {
+        contVNs.push(h('i', {
+          class: ['vxe-button--item vxe-button--suffix-icon', suffixIcon]
+        }));
+      }
+      if (suffixTooltip) {
+        contVNs.push($xeButton.renderTooltipIcon(h, suffixTipOpts, 'suffix'));
+      }
+      return contVNs;
+    },
+    renderVN: function renderVN(h) {
+      var $xeButton = this;
+      var props = $xeButton;
+      var slots = $xeButton.$scopedSlots;
+      var reactData = $xeButton.reactData;
+      var className = props.className,
+        trigger = props.trigger,
+        title = props.title,
+        routerLink = props.routerLink,
+        type = props.type,
+        destroyOnClose = props.destroyOnClose,
+        name = props.name,
+        loading = props.loading,
+        shadow = props.shadow,
+        showDropdownIcon = props.showDropdownIcon;
+      var initialized = reactData.initialized,
+        isAniVisible = reactData.isAniVisible,
+        visiblePanel = reactData.visiblePanel;
+      var isFormBtn = $xeButton.computeIsFormBtn;
+      var btnMode = $xeButton.computeBtnMode;
+      var btnStatus = $xeButton.computeBtnStatus;
+      var btnRound = $xeButton.computeBtnRound;
+      var btnCircle = $xeButton.computeBtnCircle;
+      var btnTransfer = $xeButton.computeBtnTransfer;
+      var btnAlign = $xeButton.computeBtnAlign;
+      var btnDisabled = $xeButton.computeBtnDisabled;
+      var permissionInfo = $xeButton.computePermissionInfo;
+      var downBtnList = $xeButton.computeDownBtnList;
+      var popupOpts = $xeButton.computePopupOpts;
+      var vSize = $xeButton.computeSize;
+      var dropdownsSlot = slots.dropdowns;
+      var ppClassName = popupOpts.className || props.popupClassName;
+      if (!permissionInfo.visible) {
+        return (0, _ui.renderEmptyElement)($xeButton);
+      }
+      if (dropdownsSlot || downBtnList.length) {
+        var btnOns = {
+          contextmenu: $xeButton.contextmenuEvent
+        };
+        var panelOns = {};
+        if (trigger === 'hover') {
+          // hover 触发
+          btnOns.mouseenter = $xeButton.mouseenterTargetEvent;
+          btnOns.mouseleave = $xeButton.mouseleaveTargetEvent;
+          panelOns.mouseenter = $xeButton.mouseenterDropdownEvent;
+          panelOns.mouseleave = $xeButton.mouseleaveDropdownEvent;
+        }
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-button--dropdown', className ? _xeUtils.default.isFunction(className) ? className({
+            $button: $xeButton
+          }) : className : '', _defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--active', visiblePanel)]
+        }, [routerLink ? h('router-link', {
+          ref: 'refButton',
+          class: ['vxe-button', 'vxe-button--link', "type--".concat(btnMode), btnAlign ? "align--".concat(btnAlign) : '', className ? _xeUtils.default.isFunction(className) ? className({
+            $button: $xeButton
+          }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), "theme--".concat(btnStatus), btnStatus), 'is--round', btnRound), 'is--circle', btnCircle), 'is--shadow', shadow), 'is--disabled', btnDisabled || loading), 'is--loading', loading)],
+          attrs: {
+            title: title,
+            name: name,
+            type: isFormBtn ? type : 'button',
+            disabled: btnDisabled || loading,
+            custom: true,
+            to: routerLink
+          },
+          on: Object.assign({
+            click: $xeButton.clickTargetEvent
+          }, btnOns)
+        }, $xeButton.renderContent(h).concat(showDropdownIcon ? [h('i', {
+          class: "vxe-button--dropdown-arrow ".concat((0, _ui.getIcon)().BUTTON_DROPDOWN)
+        })] : [])) : h('button', {
+          ref: 'refButton',
+          class: ['vxe-button', "type--".concat(btnMode), btnAlign ? "align--".concat(btnAlign) : '', className ? _xeUtils.default.isFunction(className) ? className({
+            $button: $xeButton
+          }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), "theme--".concat(btnStatus), btnStatus), 'is--round', btnRound), 'is--circle', btnCircle), 'is--shadow', shadow), 'is--disabled', btnDisabled || loading), 'is--loading', loading)],
+          attrs: {
+            title: title,
+            name: name,
+            type: isFormBtn ? type : 'button',
+            disabled: btnDisabled || loading
+          },
+          on: Object.assign({
+            click: $xeButton.clickTargetEvent
+          }, btnOns)
+        }, $xeButton.renderContent(h).concat(showDropdownIcon ? [h('i', {
+          class: "vxe-button--dropdown-arrow ".concat((0, _ui.getIcon)().BUTTON_DROPDOWN)
+        })] : [])), h('div', {
+          ref: 'refBtnPanel',
+          class: ['vxe-button--dropdown-panel', ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
+            $button: $xeButton
+          }) : ppClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', isAniVisible), 'ani--enter', visiblePanel)],
+          attrs: {
+            placement: reactData.panelPlacement
+          },
+          style: reactData.panelStyle,
+          on: panelOns
+        }, initialized && (visiblePanel || isAniVisible) ? [dropdownsSlot ? h('div', {
+          class: 'vxe-button--dropdown-wrapper',
+          on: {
+            mousedown: $xeButton.mousedownDropdownEvent,
+            click: $xeButton.clickDropdownEvent
+          }
+        }, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? dropdownsSlot.call($xeButton, {}) : []) : h('div', {
+          class: 'vxe-button--dropdown-wrapper'
+        }, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? downBtnList.map(function (option, i) {
+          return h('vxe-button', {
+            key: i,
+            props: {
+              type: option.type,
+              mode: option.mode || btnMode,
+              className: option.className,
+              name: option.name,
+              routerLink: option.routerLink,
+              permissionCode: option.permissionCode,
+              title: option.title,
+              content: option.content,
+              status: option.status,
+              icon: option.icon,
+              round: _xeUtils.default.isBoolean(option.round) ? option.round : btnMode === 'text' ? false : btnRound,
+              circle: _xeUtils.default.isBoolean(option.circle) ? option.circle : btnMode === 'text' ? false : btnCircle,
+              disabled: option.disabled,
+              loading: option.loading,
+              align: option.align
+            },
+            on: {
+              click: function click(params) {
+                $xeButton.downBtnClickEvent(params, option);
+              }
+            }
+          });
+        }) : [])] : [])]);
+      }
+      if (routerLink) {
+        return h('router-link', {
+          ref: 'refButton',
+          class: ['vxe-button', 'vxe-button--link', "type--".concat(btnMode), btnAlign ? "align--".concat(btnAlign) : '', className ? _xeUtils.default.isFunction(className) ? className({
+            $button: $xeButton
+          }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), "theme--".concat(btnStatus), btnStatus), 'is--round', btnRound), 'is--circle', btnCircle), 'is--shadow', shadow), 'is--disabled', btnDisabled || loading), 'is--loading', loading)],
+          props: {
+            title: title,
+            name: name,
+            type: isFormBtn ? type : 'button',
+            disabled: btnDisabled || loading,
+            custom: true,
+            to: routerLink
+          },
+          on: {
+            click: $xeButton.clickEvent,
+            mouseenter: $xeButton.mouseenterEvent,
+            mouseleave: $xeButton.mouseleaveEvent,
+            contextmenu: $xeButton.contextmenuEvent
+          }
+        }, $xeButton.renderContent(h));
+      }
+      return h('button', {
+        ref: 'refButton',
+        class: ['vxe-button', "type--".concat(btnMode), btnAlign ? "align--".concat(btnAlign) : '', className ? _xeUtils.default.isFunction(className) ? className({
+          $button: $xeButton
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), "theme--".concat(btnStatus), btnStatus), 'is--round', btnRound), 'is--circle', btnCircle), 'is--shadow', shadow), 'is--disabled', btnDisabled || loading), 'is--loading', loading)],
+        attrs: {
+          title: title,
+          name: name,
+          type: isFormBtn ? type : 'button',
+          disabled: btnDisabled || loading
+        },
+        on: {
+          click: $xeButton.clickEvent,
+          mouseenter: $xeButton.mouseenterEvent,
+          mouseleave: $xeButton.mouseleaveEvent,
+          contextmenu: $xeButton.contextmenuEvent
+        }
+      }, $xeButton.renderContent(h));
+    }
+  },
+  mounted: function mounted() {
+    var $xeButton = this;
+    var props = $xeButton;
+    if (props.type === 'text') {
+      warnLog('vxe.error.delProp', ['type=text', 'mode=text']);
+    }
+    _ui.globalEvents.on($xeButton, 'mousewheel', $xeButton.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeButton, 'mousedown', $xeButton.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeButton, 'resize', $xeButton.handleGlobalResizeEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeButton = this;
+    var panelElem = $xeButton.$refs.refBtnPanel;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+  },
+  destroyed: function destroyed() {
+    var $xeButton = this;
+    _ui.globalEvents.off($xeButton, 'mousewheel');
+    _ui.globalEvents.off($xeButton, 'mousedown');
+    _ui.globalEvents.off($xeButton, 'resize');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */