add namespace

README.md

@@ -24,6 +24,9 @@ import VXETablePluginElement from 'vxe-table-plugin-element'
 import 'vxe-table-plugin-element/dist/style.css'
 // ...
 
+// or namespace
+// VXETable.use(VXETablePluginElement, { namespace: 'ep' })
+
 VXETable.use(VXETablePluginElement)
 ```
 

gulpfile.js

@@ -18,7 +18,9 @@ const exportModuleName = 'VXETablePluginElement'
 
 gulp.task('build_style', function () {
   return gulp.src('style.scss')
-    .pipe(sass())
+    .pipe(sass({
+      includePaths: ['node_modules']
+    }))
     .pipe(prefixer({
       borwsers: ['last 1 version', '> 1%', 'not ie <= 8'],
       cascade: true,

index.ts

@@ -2,9 +2,16 @@ import { h, resolveComponent, ComponentOptions } from 'vue'
 import XEUtils from 'xe-utils'
 import { VXETableCore, VxeTableDefines, VxeColumnPropTypes, VxeGlobalRendererHandles, VxeGlobalInterceptorHandles, FormItemRenderOptions, FormItemContentRenderParams } from 'vxe-table'
 import dayjs from 'dayjs'
+interface ConfigProviderContext {
+  namespace?: string
+}
 
 let vxetable: VXETableCore
 
+const defaultOptions: ConfigProviderContext = {
+  namespace: 'el'
+}
+
 function isEmptyValue (cellValue: any) {
   return cellValue === null || cellValue === undefined || cellValue === ''
 }
@@ -459,22 +466,23 @@ function getEventTargetNode (evnt: any, container: HTMLElement, className: strin
 /**
  * 事件兼容性处理
  */
-function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearActivedParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
+function handleClearEvent (vxeOptions: ConfigProviderContext, params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearActivedParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
   const { $event } = params
   const bodyElem = document.body
+  const { namespace } = vxeOptions
   if (
     // 远程搜索
-    getEventTargetNode($event, bodyElem, 'el-autocomplete-suggestion').flag ||
+    getEventTargetNode($event, bodyElem, `${namespace}-autocomplete-suggestion`).flag ||
     // 下拉框
-    getEventTargetNode($event, bodyElem, 'el-select-dropdown').flag ||
+    getEventTargetNode($event, bodyElem, `${namespace}-select-dropdown`).flag ||
     // 级联
-    getEventTargetNode($event, bodyElem, 'el-cascader__dropdown').flag ||
-    getEventTargetNode($event, bodyElem, 'el-cascader-menus').flag ||
+    getEventTargetNode($event, bodyElem, `${namespace}-cascader__dropdown`).flag ||
+    getEventTargetNode($event, bodyElem, `${namespace}-cascader-menus`).flag ||
     // 日期
-    getEventTargetNode($event, bodyElem, 'el-time-panel').flag ||
-    getEventTargetNode($event, bodyElem, 'el-picker-panel').flag ||
+    getEventTargetNode($event, bodyElem, `${namespace}-time-panel`).flag ||
+    getEventTargetNode($event, bodyElem, `${namespace}-picker-panel`).flag ||
     // 颜色
-    getEventTargetNode($event, bodyElem, 'el-color-dropdown').flag
+    getEventTargetNode($event, bodyElem, `${namespace}-color-dropdown`).flag
   ) {
     return false
   }
@@ -484,30 +492,32 @@ function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearF
  * 基于 vxe-table 表格的适配插件，用于兼容 element-ui 组件库
  */
 export const VXETablePluginElement = {
-  install (vxetablecore: VXETableCore) {
+  install (vxetablecore: VXETableCore, vxetableoptions?: ConfigProviderContext) {
     const { interceptor, renderer } = vxetablecore
-
+    const vxeOptions = Object.assign(defaultOptions, vxetableoptions)
+    const { namespace } = vxeOptions
+
     vxetable = vxetablecore
 
     renderer.mixin({
       ElAutocomplete: {
-        autofocus: 'input.el-input__inner',
+        autofocus: `input.${namespace}-input__inner`,
         renderDefault: createEditRender(),
         renderEdit: createEditRender(),
         renderFilter: createFilterRender(),
         defaultFilterMethod: defaultExactFilterMethod,
         renderItemContent: createFormItemRender()
       },
       ElInput: {
-        autofocus: 'input.el-input__inner',
+        autofocus: `input.${namespace}-input__inner`,
         renderDefault: createEditRender(),
         renderEdit: createEditRender(),
         renderFilter: createFilterRender(),
         defaultFilterMethod: defaultFuzzyFilterMethod,
         renderItemContent: createFormItemRender()
       },
       ElInputNumber: {
-        autofocus: 'input.el-input__inner',
+        autofocus: `input.${namespace}-input__inner`,
         renderDefault: createEditRender(),
         renderEdit: createEditRender(),
         renderFilter: createFilterRender(),
@@ -788,9 +798,9 @@ export const VXETablePluginElement = {
       }
     })
 
-    interceptor.add('event.clearFilter', handleClearEvent)
-    interceptor.add('event.clearActived', handleClearEvent)
-    interceptor.add('event.clearAreas', handleClearEvent)
+    interceptor.add('event.clearFilter', handleClearEvent.bind(null, vxeOptions))
+    interceptor.add('event.clearActived', handleClearEvent.bind(null, vxeOptions))
+    interceptor.add('event.clearAreas', handleClearEvent.bind(null, vxeOptions))
   }
 }
 

package.json

@@ -18,6 +18,7 @@
   "typings": "index.ts",
   "devDependencies": {
     "@babel/core": "^7.12.3",
+    "@babel/plugin-transform-modules-umd": "^7.22.5",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.12.1",
     "@babel/runtime": "^7.12.5",
@@ -55,6 +56,7 @@
     "xe-utils": "^3.5.11"
   },
   "peerDependencies": {
+    "element-plus": "^2.3.12",
     "vxe-table": "^4.2.0"
   },
   "repository": {

style.scss

@@ -1,29 +1,31 @@
+@use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+
 $vxe-table-validate-error-color: #f56c6c;
 
 %ResetBorder {
   border: 0;
 }
 
 %SliderStyle {
-  .el-slider__runway {
+  .#{bem(slider,runway)} {
     margin: 8px 0;
-    .el-slider__button-wrapper {
+    .#{bem(slider,button,wrapper)} {
       z-index: auto;
     }
   }
 }
 
 %CompWidth {
-  & > .el-input,
-  & > .el-autocomplete,
-  & > .el-input-number,
-  & > .el-select,
-  & > .el-cascader,
-  & > .el-date-editor,
-  & > .el-slider {
+  & > .#{bem(input)},
+  & > .#{bem(autocomplete)},
+  & > .#{bem(input-number)},
+  & > .#{bem(select)},
+  & > .#{bem(cascader)},
+  & > .#{bem(date-editor)},
+  & > .#{bem(slider)} {
     width: 100%;
   }
-  & > .el-color-picker {
+  & > .#{bem(color-picker)} {
     vertical-align: middle;
   }
 }
@@ -34,63 +36,63 @@ $vxe-table-validate-error-color: #f56c6c;
 }
 .vxe-table--filter-element-wrapper {
   padding: 0.8em 1em;
-  & > .el-input,
-  & > .el-input-number,
-  & > .el-autocomplete,
-  & > .el-select,
-  & > .el-rate,
-  & > .el-slider {
+  & > .#{bem(input)},
+  & > .#{bem(input-number)},
+  & > .#{bem(autocomplete)},
+  & > .#{bem(select)},
+  & > .#{bem(rate)},
+  & > .#{bem(slider)} {
     width: 180px;
   }
-  & > .el-slider {
+  & > .#{bem(slider)} {
     @extend %SliderStyle;
   }
 }
 .vxe-table {
   .vxe-cell,
   .vxe-tree-cell {
     @extend %CompWidth;
-    & > .el-slider {
+    & > .#{bem(slider)} {
       @extend %SliderStyle;
     }
   }
 }
 .col--valid-error {
   & > .vxe-cell,
   & > .vxe-tree-cell {
-    & > .el-input .el-input__inner,
-    & > .el-autocomplete .el-input__inner,
-    & > .el-input-number .el-input__inner,
-    & > .el-select .el-input__inner,
-    & > .el-cascader .el-input__inner,
-    & > .el-date-picker .el-input__inner {
+    & > .#{bem(input)} .#{bem(input,inner)},
+    & > .#{bem(autocomplete)} .#{bem(input,inner)},
+    & > .#{bem(input-number)} .#{bem(input,inner)},
+    & > .#{bem(select)} .#{bem(input,inner)},
+    & > .#{bem(cascader)} .#{bem(input,inner)},
+    & > .#{bem(date-picker)} .#{bem(input,inner)} {
       border-color: $vxe-table-validate-error-color;
     }
   }
 }
 .vxe-table.cell--highlight {
   .vxe-cell,
   .vxe-tree-cell {
-    & > .el-input:not(.el-date-editor),
-    & > .el-autocomplete,
-    & > .el-select,
-    & > .el-cascader {
-      .el-input__inner {
+    & > .#{bem(input)}:not(.#{bem(date-editor)}),
+    & > .#{bem(autocomplete)},
+    & > .#{bem(select)},
+    & > .#{bem(cascader)} {
+      .#{bem(input,inner)} {
         padding: 0;
         @extend %ResetBorder;
       }
     }
-    & > .el-input-number {
-      .el-input-number__decrease,
-      .el-input-number__increase {
+    & > .#{bem(input-number)} {
+      .#{bem(input-number,decrease)},
+      .#{bem(input-number,decrease)} {
         @extend %ResetBorder;
       }
-      .el-input__inner {
+      .#{bem(input,inner)} {
         @extend %ResetBorder;
       }
     }
-    & > .el-date-editor {
-      .el-input__inner {
+    & > .#{bem(date-editor)} {
+      .#{bem(input,inner)} {
         @extend %ResetBorder;
       }
     }