feat: 增加覆盖默认数据参数

imaxing · Jul 14, 2023 · 565186e · 565186e
1 parent 2781139
commit 565186e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -27,12 +27,13 @@ this.$toast({ message: 'hello world' })
 
 #### Options
 
-| 参数名    | 说明                 | 类型     | 默认值          |
-| --------- | -------------------- | -------- | --------------- |
-| name      | 方法名               | String   | $dynamicMount   |
-| extend    | 挂载的组件 (必填)    | VNode    | -               |
-| nextTick  | 挂载后的回调         | Function | -               |
-| className | 挂载节点自定义 class | String   | dynamic-element |
+| 参数名        | 说明                 | 类型                | 默认值          |
+| ------------- | -------------------- | ------------------- | --------------- |
+| name          | 方法名               | String              | $dynamicMount   |
+| extend        | 挂载的组件 (必填)    | VNode               | -               |
+| nextTick      | 挂载后的回调         | Function            | -               |
+| className     | 挂载节点自定义 class | String              | dynamic-element |
+| defaultOption | extand 组件默认配置  | Record<string, any> | {}              |
 
 #### Example
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "use-dynamic-mount",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "browser": "dist/index.umd.js",

diff --git a/src/index.ts b/src/index.ts
@@ -2,6 +2,7 @@ export interface DynamicMountOptions {
   name?: string
   className?: string
   extend?: any
+  defaultOption?: Record<string, any>
   nextTick?: () => void
 }
 
@@ -14,13 +15,20 @@ export interface MountReturnValue {
 
 export default () => ({
   install(Vue: any, options?: DynamicMountOptions) {
-    const { name = '$dynamicMount', className = 'dynamic-element', extend, nextTick } = options || {}
+    const {
+      name = '$dynamicMount',
+      className = 'dynamic-element',
+      extend,
+      nextTick,
+      defaultOption = {}
+    } = options || {}
     if (!extend) return
 
     Vue.prototype[name] = (options: any): MountReturnValue => {
       const DynamicComponent = Vue.extend(extend)
       const app = new DynamicComponent({
         data: () => ({
+          ...defaultOption,
           ...options,
           destroy: () => destroy()
         })
@@ -29,6 +37,7 @@ export default () => ({
       const destroy = () => {
         app.$el.remove()
         app.$destroy()
+        options.onDestroy?.()
       }
 
       const div = document.createElement('div')
@@ -40,7 +49,7 @@ export default () => ({
       return {
         app,
         destroy,
-        close: () => app.close && app.close(),
+        close: () => app.close?.(),
         component: () => app.$refs.component
       }
     }