vxe-table 3.8.0-beta.3 → 3.8.0-beta.4

package/lib/vxe-tooltip/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -18,7 +18,6 @@ Object.keys(_tooltip).forEach(function (key) {
     }
   });
 });
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var _default = _tooltip.default;
-exports.default = _default;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _tooltip.default;

package/lib/vxe-tooltip/index.min.js

@@ -1 +1 @@
-"use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={},_tooltip=(exports.default=void 0,_interopRequireWildcard(require("../tooltip")));function _getRequireWildcardCache(e){var t,o;return"function"!=typeof WeakMap?null:(t=new WeakMap,o=new WeakMap,(_getRequireWildcardCache=function(e){return e?o:t})(e))}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!==_typeof(e)&&"function"!=typeof e)return{default:e};t=_getRequireWildcardCache(t);if(t&&t.has(e))return t.get(e);var o,r,n={},u=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&((r=u?Object.getOwnPropertyDescriptor(e,o):null)&&(r.get||r.set)?Object.defineProperty(n,o,r):n[o]=e[o]);return n.default=e,t&&t.set(e,n),n}Object.keys(_tooltip).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_tooltip[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _tooltip[e]}})});var _default=_tooltip.default;exports.default=_default;
+"use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={},_tooltip=(exports.default=void 0,_interopRequireWildcard(require("../tooltip")));function _getRequireWildcardCache(e){var t,o;return"function"!=typeof WeakMap?null:(t=new WeakMap,o=new WeakMap,(_getRequireWildcardCache=function(e){return e?o:t})(e))}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=_typeof(e)&&"function"!=typeof e)return{default:e};t=_getRequireWildcardCache(t);if(t&&t.has(e))return t.get(e);var o,r,n={__proto__:null},u=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(o in e)"default"!==o&&{}.hasOwnProperty.call(e,o)&&((r=u?Object.getOwnPropertyDescriptor(e,o):null)&&(r.get||r.set)?Object.defineProperty(n,o,r):n[o]=e[o]);return n.default=e,t&&t.set(e,n),n}Object.keys(_tooltip).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_tooltip[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _tooltip[e]}})});var _default=exports.default=_tooltip.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.8.0-beta.3",
+  "version": "3.8.0-beta.4",
   "description": "一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -27,54 +27,51 @@
   "typings": "types/index.d.ts",
   "dependencies": {
     "dom-zindex": "^1.0.1",
-    "xe-utils": "^3.5.24"
+    "xe-utils": "^3.5.25"
   },
   "devDependencies": {
-    "@types/resize-observer-browser": "^0.1.7",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@types/resize-observer-browser": "^0.1.11",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^9.1.0",
     "core-js": "^3.8.3",
     "del": "^6.1.1",
-    "dom-zindex": "^0.4.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^8.0.3",
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^6.1.0",
+    "gulp-autoprefixer": "^8.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
-    "gulp-rename": "^1.4.0",
-    "gulp-replace": "^1.0.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.4",
     "gulp-sass": "^5.1.0",
-    "gulp-sourcemaps": "^2.6.5",
+    "gulp-sourcemaps": "^3.0.0",
     "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.2",
     "postcss": "^8.2.15",
-    "sass": "^1.56.1",
-    "sass-loader": "^12.0.0",
+    "sass": "^1.75.0",
+    "sass-loader": "^14.2.0",
     "typescript": "~4.5.5",
     "vue": "^2.7.14",
     "vue-i18n": "^8.18.1",
-    "vue-property-decorator": "^8.4.2",
     "vue-router": "^3.2.0",
-    "vue-template-compiler": "^2.7.13",
+    "vue-template-compiler": "^2.7.14",
     "vuex": "^3.4.0",
     "xe-clipboard": "^1.10.1"
   },
   "peerDependencies": {
-    "vue": "^2.6.0",
-    "xe-utils": "^3.5.0"
+    "vue": "^2.6.0"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

package/packages/all.js

@@ -1,17 +1,19 @@
 import XEUtils from 'xe-utils'
 import { VXETable } from './v-x-e-table'
 
-import { Icon } from './icon'
 import { Filter } from './filter'
 import { Menu } from './menu'
 import { Edit } from './edit'
 import { Export } from './export'
 import { Keyboard } from './keyboard'
 import { Validator } from './validator'
+import { Custom } from './custom'
 
+import { Icon } from './icon'
 import { Column } from './column'
 import { Colgroup } from './colgroup'
 import { Grid } from './grid'
+import { Table } from './table'
 import { Toolbar } from './toolbar'
 import { Pager } from './pager'
 import { Checkbox } from './checkbox'
@@ -35,24 +37,24 @@ import { Switch } from './switch'
 import { List } from './list'
 import { Pulldown } from './pulldown'
 
-import { Table } from './table'
-
 import zhCN from './locale/lang/zh-CN'
 
 // 按需加载的组件
 const components = [
   // 功能模块
-  Icon,
   Filter,
   Menu,
   Edit,
   Export,
   Keyboard,
   Validator,
+  Custom,
 
   // 可选组件
+  Icon,
   Column,
   Colgroup,
+  Table,
   Grid,
   Toolbar,
   Pager,
@@ -75,10 +77,7 @@ const components = [
   Option,
   Switch,
   List,
-  Pulldown,
-
-  // 核心
-  Table
+  Pulldown
 ]
 
 // 默认安装
@@ -96,17 +95,19 @@ VXETable.config({
 
 export * from './v-x-e-table'
 
-export * from './icon'
 export * from './filter'
 export * from './edit'
+export * from './menu'
 export * from './export'
 export * from './keyboard'
 export * from './validator'
+export * from './custom'
 
+export * from './icon'
 export * from './column'
 export * from './colgroup'
+export * from './table'
 export * from './grid'
-export * from './menu'
 export * from './toolbar'
 export * from './pager'
 export * from './checkbox'
@@ -129,5 +130,3 @@ export * from './option'
 export * from './switch'
 export * from './list'
 export * from './pulldown'
-
-export * from './table'

package/packages/button/index.d.ts

@@ -1,4 +1,4 @@
-import { Button } from '../../types/button'
+import { VxeButton } from '../../types/button'
 
 export * from '../../types/button'
-export default Button
+export default VxeButton

package/packages/button/index.js

@@ -1,9 +1,11 @@
-import VxeButton from './src/button'
+import VxeButtonComponent from './src/button'
 
-export const Button = Object.assign(VxeButton, {
+export const VxeButton = Object.assign(VxeButtonComponent, {
   install (Vue) {
-    Vue.component(VxeButton.name, VxeButton)
+    Vue.component(VxeButtonComponent.name, VxeButtonComponent)
   }
 })
 
-export default Button
+export const Button = VxeButton
+
+export default VxeButton

package/packages/button/src/button.js

@@ -20,6 +20,7 @@ export default {
     icon: String,
     round: Boolean,
     circle: Boolean,
+    title: String,
     disabled: Boolean,
     loading: Boolean,
     destroyOnClose: Boolean,
@@ -69,7 +70,7 @@ export default {
     GlobalEvent.off(this, 'mousewheel')
   },
   render (h) {
-    const { $scopedSlots, className, popupClassName, inited, type, destroyOnClose, isFormBtn, status, btnType, vSize, name, disabled, loading, showPanel, animatVisible, panelPlacement } = this
+    const { $scopedSlots, className, popupClassName, title, inited, type, destroyOnClose, isFormBtn, status, btnType, vSize, name, disabled, loading, showPanel, animatVisible, panelPlacement } = this
     const downsSlot = $scopedSlots.dropdowns
     return downsSlot ? h('div', {
       class: ['vxe-button--dropdown', className ? (XEUtils.isFunction(className) ? className({ $button: this }) : className) : '', {
@@ -89,6 +90,7 @@ export default {
         }],
         attrs: {
           name,
+          title,
           type: isFormBtn ? type : 'button',
           disabled: disabled || loading
         },
@@ -119,14 +121,14 @@ export default {
           on: {
             mousedown: this.mousedownDropdownEvent,
             click: this.clickDropdownEvent,
-            mouseenter: this.mouseenterEvent,
-            mouseleave: this.mouseleaveEvent
+            mouseenter: this.mouseenterDropdownEvent,
+            mouseleave: this.mouseleaveDropdownEvent
           }
         }, destroyOnClose && !showPanel ? [] : downsSlot.call(this, {}, h))
       ] : null)
     ]) : h('button', {
       ref: 'xBtn',
-      class: ['vxe-button', `type--${btnType}`, className, {
+      class: ['vxe-button', `type--${btnType}`, className ? (XEUtils.isFunction(className) ? className({ $button: this }) : className) : '', {
         [`size--${vSize}`]: vSize,
         [`theme--${status}`]: status,
         'is--round': this.round,
@@ -136,11 +138,14 @@ export default {
       }],
       attrs: {
         name,
+        title,
         type: isFormBtn ? type : 'button',
         disabled: disabled || loading
       },
       on: {
-        click: this.clickEvent
+        click: this.clickEvent,
+        onMouseenter: this.mouseenterEvent,
+        onMouseleave: this.mouseleaveEvent
       }
     }, this.renderContent(h))
   },
@@ -223,7 +228,13 @@ export default {
         this.$emit('dropdown-click', { name: targetElem.getAttribute('name'), $event: evnt })
       }
     },
-    mouseenterTargetEvent () {
+    mouseenterEvent (evnt) {
+      this.$emit('mouseenter', { $event: evnt })
+    },
+    mouseleaveEvent (evnt) {
+      this.$emit('mouseleave', { $event: evnt })
+    },
+    mouseenterTargetEvent (evnt) {
       const panelElem = this.$refs.panel
       panelElem.dataset.active = 'Y'
       if (!this.inited) {
@@ -234,13 +245,14 @@ export default {
       }
       this.showTime = setTimeout(() => {
         if (panelElem.dataset.active === 'Y') {
-          this.mouseenterEvent()
+          this.mouseenterDropdownEvent()
         } else {
           this.animatVisible = false
         }
       }, 250)
+      this.$emit('mouseenter', { $event: evnt })
     },
-    mouseenterEvent () {
+    mouseenterDropdownEvent () {
       const panelElem = this.$refs.panel
       panelElem.dataset.active = 'Y'
       this.animatVisible = true
@@ -257,7 +269,7 @@ export default {
         }
       }, 20)
     },
-    mouseleaveEvent () {
+    mouseleaveDropdownEvent () {
       this.closePanel()
     },
     closePanel () {

package/packages/button-group/index.d.ts

@@ -1,4 +1,4 @@
-import { ButtonGroup } from '../../types/button-group'
+import { VxeButtonGroup } from '../../types/button-group'
 
 export * from '../../types/button-group'
-export default ButtonGroup
+export default VxeButtonGroup

package/packages/button-group/index.js

@@ -1,9 +1,11 @@
-import VxeButtonGroup from '../button/src/group'
+import VxeButtonGroupComponent from '../button/src/group'
 
-export const ButtonGroup = Object.assign(VxeButtonGroup, {
+export const VxeButtonGroup = Object.assign(VxeButtonGroupComponent, {
   install (Vue) {
-    Vue.component(VxeButtonGroup.name, VxeButtonGroup)
+    Vue.component(VxeButtonGroupComponent.name, VxeButtonGroupComponent)
   }
 })
 
-export default ButtonGroup
+export const ButtonGroup = VxeButtonGroup
+
+export default VxeButtonGroup

package/packages/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import { Checkbox } from '../../types/checkbox'
+import { VxeCheckbox } from '../../types/checkbox'
 
 export * from '../../types/checkbox'
-export default Checkbox
+export default VxeCheckbox

package/packages/checkbox/index.js

@@ -1,9 +1,11 @@
-import VxeCheckbox from './src/checkbox'
+import VxeCheckboxComponent from './src/checkbox'
 
-export const Checkbox = Object.assign(VxeCheckbox, {
+export const VxeCheckbox = Object.assign(VxeCheckboxComponent, {
   install (Vue) {
-    Vue.component(VxeCheckbox.name, VxeCheckbox)
+    Vue.component(VxeCheckboxComponent.name, VxeCheckboxComponent)
   }
 })
 
-export default Checkbox
+export const Checkbox = VxeCheckbox
+
+export default VxeCheckbox

package/packages/checkbox-group/index.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxGroup } from '../../types/checkbox-group'
+import { VxeCheckboxGroup } from '../../types/checkbox-group'
 
 export * from '../../types/checkbox-group'
-export default CheckboxGroup
+export default VxeCheckboxGroup

package/packages/checkbox-group/index.js

@@ -1,9 +1,11 @@
-import VxeCheckboxGroup from '../checkbox/src/group'
+import VxeCheckboxGroupComponent from '../checkbox/src/group'
 
-export const CheckboxGroup = Object.assign(VxeCheckboxGroup, {
+export const VxeCheckboxGroup = Object.assign(VxeCheckboxGroupComponent, {
   install (Vue) {
-    Vue.component(VxeCheckboxGroup.name, VxeCheckboxGroup)
+    Vue.component(VxeCheckboxGroupComponent.name, VxeCheckboxGroupComponent)
   }
 })
 
-export default CheckboxGroup
+export const CheckboxGroup = VxeCheckboxGroup
+
+export default VxeCheckboxGroup

package/packages/colgroup/index.d.ts

@@ -1,4 +1,4 @@
-import { Colgroup } from '../../types/colgroup'
+import { VxeColgroup } from '../../types/colgroup'
 
 export * from '../../types/colgroup'
-export default Colgroup
+export default VxeColgroup

package/packages/colgroup/index.js

@@ -1,11 +1,13 @@
-import VxeTableColgroup from '../table/src/group'
+import VxeTableColgroupComponent from '../table/src/group'
 
-export const Colgroup = Object.assign(VxeTableColgroup, {
+export const VxeColgroup = Object.assign(VxeTableColgroupComponent, {
   install (Vue) {
-    Vue.component(VxeTableColgroup.name, VxeTableColgroup)
+    Vue.component(VxeTableColgroupComponent.name, VxeTableColgroupComponent)
     // 兼容旧用法
-    Vue.component('VxeTableColgroup', VxeTableColgroup)
+    Vue.component('VxeTableColgroup', VxeTableColgroupComponent)
   }
 })
 
-export default Colgroup
+export const Colgroup = VxeColgroup
+
+export default VxeColgroup

package/packages/column/index.d.ts

@@ -1,4 +1,4 @@
-import { Column } from '../../types/column'
+import { VxeColumn } from '../../types/column'
 
 export * from '../../types/column'
-export default Column
+export default VxeColumn

package/packages/column/index.js

@@ -1,11 +1,13 @@
-import VxeTableColumn from '../table/src/column'
+import VxeTableColumnComponent from '../table/src/column'
 
-export const Column = Object.assign(VxeTableColumn, {
+export const VxeColumn = Object.assign(VxeTableColumnComponent, {
   install (Vue) {
-    Vue.component(VxeTableColumn.name, VxeTableColumn)
+    Vue.component(VxeTableColumnComponent.name, VxeTableColumnComponent)
     // 兼容旧用法
-    Vue.component('VxeTableColumn', VxeTableColumn)
+    Vue.component('VxeTableColumn', VxeTableColumnComponent)
   }
 })
 
-export default Column
+export const Column = VxeColumn
+
+export default VxeColumn

package/packages/custom/index.d.ts

@@ -0,0 +1,4 @@
+import { VxeTableCustomModule } from '../../types/module/custom'
+
+export * from '../../types/module/custom'
+export default VxeTableCustomModule

package/packages/custom/index.js

@@ -0,0 +1,17 @@
+import Table from '../table'
+import mixin from './src/mixin'
+import PanelComponent from './src/panel'
+import VXETable from '../v-x-e-table'
+
+export const VxeTableCustomModule = {
+  Panel: PanelComponent,
+  install (Vue) {
+    VXETable.reg('custom')
+    Table.mixins.push(mixin)
+    Vue.component(PanelComponent.name, PanelComponent)
+  }
+}
+
+export const Custom = VxeTableCustomModule
+
+export default VxeTableCustomModule

package/packages/custom/src/mixin.js

@@ -0,0 +1,74 @@
+export default {
+  methods: {
+    _openCustom () {
+      const { customStore } = this
+      customStore.visible = true
+      this.checkCustomStatus()
+      this.calcMaxHeight()
+      return this.$nextTick().then(() => this.calcMaxHeight())
+    },
+    _closeCustom () {
+      const { customStore, customOpts } = this
+      if (customStore.visible) {
+        customStore.visible = false
+        if (!customOpts.immediate) {
+          this.handleCustom()
+        }
+      }
+      return this.$nextTick()
+    },
+    calcMaxHeight  () {
+      const { $refs, customStore } = this
+      const customWrapperElem = $refs.customWrapper ? $refs.customWrapper.$el : null
+      const headElem = $refs.tableHeader ? $refs.tableHeader.$el : null
+      const bodyElem = $refs.tableBody ? $refs.tableBody.$el : null
+      // 判断面板不能大于表格高度
+      let tableHeight = 0
+      if (headElem) {
+        tableHeight += headElem.clientHeight
+      }
+      if (bodyElem) {
+        tableHeight += bodyElem.clientHeight
+      }
+      customStore.maxHeight = Math.max(0, customWrapperElem ? Math.min(customWrapperElem.clientHeight, tableHeight - 80) : 0)
+    },
+    checkCustomStatus () {
+      const { customStore, collectColumn, customOpts } = this
+      const { checkMethod } = customOpts
+      customStore.isAll = collectColumn.every((column) => (checkMethod ? !checkMethod({ column }) : false) || column.visible)
+      customStore.isIndeterminate = !customStore.isAll && collectColumn.some((column) => (!checkMethod || checkMethod({ column })) && (column.visible || column.halfVisible))
+    },
+    emitCustomEvent (type, evnt) {
+      const comp = this.$xegrid || this
+      comp.$emit('custom', { type, $table: this, $grid: this.$xegrid, $event: evnt })
+    },
+    triggerCustomEvent (evnt) {
+      const { customStore } = this
+      if (customStore.visible) {
+        this.closeCustom()
+        this.emitCustomEvent('close', evnt)
+      } else {
+        customStore.btnEl = evnt.target
+        this.openCustom()
+        this.emitCustomEvent('open', evnt)
+      }
+    },
+    customOpenEvent (evnt) {
+      const { customStore } = this
+      if (!customStore.visible) {
+        customStore.activeBtn = true
+        customStore.btnEl = evnt.target
+        this.openCustom()
+        this.emitCustomEvent('open', evnt)
+      }
+    },
+    customColseEvent (evnt) {
+      const { customStore } = this
+      if (customStore.visible) {
+        customStore.activeBtn = false
+        this.closeCustom()
+        this.emitCustomEvent('close', evnt)
+      }
+    }
+  }
+}